边框半径是否应该剪切内容？

Question

容器装好后，不应该将容器中的物品切掉border-radius吗？

示例HTML和CSS：

.progressbar { height: 5px; width: 100px; border-radius: 5px; }

.buffer { width: 25px; height: 5px; background: #999999; }


<div class="progressbar">

    <div class="buffer"></div>

</div>

如您所见，我border- radius在容器（.progressbar）上使用，但内容（.buffer）在容器的“外部”。我在Google
Chrome上看到了这个。

这是预期的行为吗？

PS这不是关于如何修复它，而是关于它是否应该像这样工作。

Answer 1

这是预期的行为吗？

是的，听起来确实很疯狂。原因如下：

默认overflow的<div>元素（和大多数其他的东西）是visible和规范说这约overflow:visible：

visible
此值指示未裁剪内容，即，内容可能在块框外呈现。

反过来，“背景和边框”模块中的第5.3节“边角修剪”表示：

框的背景而不是其边框图像被裁剪为适当的曲线（由“ background-clip”确定）。
修剪到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须修剪到曲线。
替换元素的内容始终会修剪到内容边缘曲线。同样，边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。

我已经特别强调了一句提到，overflow盒子的值必须大于其他的东西visible（这意味着auto，hidden，scroll等），以便边角裁剪其子。

如果该框被定义为具有可见的溢出（就像我说的是大多数视觉元素的默认值），则该内容根本不应被剪切。这就是为什么的直角.buffer超过的圆角的原因.progressbar。

因此，最简单的.buffer裁剪内部.progressbar圆角的方法是为其添加overflow:hidden样式.progressbar。