元素和容器具有相同的边界半径但不能很好地对齐[重复]答案

【问题标题】：Element and container same border radius but doesn't align well [duplicate]元素和容器具有相同的边界半径但不能很好地对齐[重复]
【发布时间】：2020-11-21 16:29:06
【问题描述】：

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

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

这里有一个问题的 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>

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

您好。

【问题讨论】：

你需要 18px 的容器
谢谢。我试过了，但是仍然可以看到一个小的白色间隙，我认为这是因为屏幕像素的渲染。关闭但仍然不是我想要的。无论如何，这个固定半径（18px）响应计算？或者只是尝试不同的半径大小？因为我认为如果内部元素改变其半径，这将不起作用。我正在寻找的是半径或类似的动态计算。

标签： css border-radius

【解决方案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>

【讨论】：

您指出我的问题似乎是正确的答案。实际上，我尝试将容器边框大小的负边距添加到链接。