css - 元素和容器具有相同的边界半径但不能很好地对齐

Question

我正在尝试在底部的圆形容器内对齐圆形链接。

但即使两个元素的边界半径相同，它们之间也有微小的差异，并且在高对比度的颜色中很明显。

这是问题的一个jsfiddle。https://jsfiddle.net/rumeau/q349vse7/3/

.container {
  border: 2px solid red;
  border-radius: 16px;
  background:white;
  overflow:hidden;
}
.link {
  display:block;
  text-align:center;
  border-radius: 16px;
  background: red;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
}

<div class="container">
  
  <p>
  Content
  </p>
  <a class="link" href="#">Read more</a>

</div>

是否有任何标准解决方案，所以我不必使用解决方法？..

问候。

Answer 1

我可以提出这样的解决方案：

.container {
  border: 2px solid red;
  border-bottom: none; /* <----- add this it */
  border-radius: 16px;
  background:white;
  overflow:hidden;
}
.link {
  display:block;
  text-align:center;
  border-radius: 16px;
  background: red;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
}

<div class="container">
  
  <p>
  Content
  </p>
  <a class="link" href="#">Read more</a>

</div>