Question

我试图创建一个＆＃34;标记＆＃34;类似的元素，左边的边框半径不同。

border-radius: 50px; /* for a completely rounded right side */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;

这是一个非常简短的例子：

＆＃13;

.tag {
  border-radius: 50px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: red;
  color: white;
  font-family: Helvetica, sans-serif;
}

＆＃13;

<span class="tag">Jeanne Oliver</span>

＆＃13;

View on JSFiddle

问题：左边的两个角落，我应该有3px的圆角，似乎没有任何圆角（在小提琴中看到它）

可能的起点 我注意到如果我将较大的半径缩小到像10-12px这样的问题，问题就会停止显现。

但是我不明白为什么这种情况发生了，而且我需要更大的数字，因为代码需要用于各种标签尺寸并且不想要重写每个尺寸的border-radius。

Answer 1

当2个相邻的角落超过边框的大小时会发生这种情况（在您的情况下，它的右上角为50px，右下角为50px，超出了元素的尺寸），浏览器必须缩小所有边界半径，直到它们不相交。

关于www.w3.org - corner-overlap的更多细节和更好的例证here（Lea Verou，＆＃34; The Humble Border-Radius＆＃34;）

Answer 2

应用左半径，没有任何问题 - 您可以通过将display: inline-block; height: 200px;设置为span来检查它。 3px是非常小的半径，可以对原始跨度大小产生明显的影响。

具有border-radius和不同半径的元素无法正确呈现

2 个答案: