具有边界半径和不同半径的元素无法正确渲染答案

【问题标题】：Element with border-radius and different radii does not render properly具有边界半径和不同半径的元素无法正确渲染
【发布时间】：2018-05-22 16:06:59
【问题描述】：

我正在尝试创建一个类似“标签”的元素，其中左侧的边框半径不同。

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

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

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

&lt;span class="tag"&gt;Jeanne Oliver&lt;/span&gt;

View on JSFiddle

问题：左边的两个角，我应该有 3px 圆角的地方，似乎根本没有任何圆角（见小提琴）

可能的起点 我注意到，如果我将较大的半径减小到 10-12px 之类的值，问题就会停止显现。

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

【问题讨论】：

这可能是相关的：“拐角曲线不能重叠：当任意两个相邻的边界半径之和超过边界框的大小时，UA必须按比例减少所有边界半径的使用值，直到没有其中重叠......” --w3.org。另请参阅Border-radius in percentage (%) and pixels (px) or em 上的信息。

标签： html css

【解决方案1】：

当两个相邻的角超过边框的大小时会发生这种情况（在您的情况下，它是右上角的 50 像素和右下角的 50 像素，这超出了元素的尺寸）并且浏览器必须按比例缩小全部边界半径，直到它们不会相交。

有关www.w3.org - corner-overlap 的更多详细信息以及更好的示例here（Lea Verou，“The Humble Border-Radius”）

【讨论】：

【解决方案2】：

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

【讨论】：

这是不正确的。正如我在问题中提到的，如果我将一般半径设置为 border-radius: 12px 之类的东西，左侧的 3px 圆角会正确渲染。
嗯...有趣的效果。您是否注意到border-bottom-left-radius 和border-top-left-radius 不会覆盖之前设置的border-radius: 50px？我检查了 css 文档，发现您可以应用如下内容：border-bottom-left-radius: 50px 20px;。所以在你的情况下，你似乎得到了综合效果。删除通用半径属性（50px）时可以看到它