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

容器装好后，不应该将容器中的物品切掉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这不是关于如何修复它，而是关于它是否应该像这样工作。

这是预期的行为吗？

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

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

visible
该值指示内容没有被裁剪，即可以在块框外部呈现。

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

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

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

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

因此，最简单的方式获得.buffer内夹.progressbar的圆角是添加一个overflow: hidden样式.progressbar，如图这个更新的小提琴。

对于任何想知道解决方案的人。最简单的方法是编辑CSS。

在给出的示例中，这将是一个合适的解决方案：

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

从语义上讲，最好只是向内部div添加一个border-radius继承属性，因此要添加新的类：

.buffer {
    border-radius: inherit;
}

因此，对于其他情况，您可以保留对overflow的使用：如果内容溢出您的frag并且想要查看一切，则使用auto：

这个问题似乎指向相同的缺陷，显然这是一个错误。

CSS3边界半径裁剪问题

编辑

ek！BoltClock提到这是故意的，因此我将在该主题上发布另一个SO问题，同时我也希望以此为参考。 如何使用CSS3防止图像溢出圆角框？

规格链接

仅供参考，我将在其中添加相关链接-但对于您给出的示例，我找不到任何明确的内容。

CSS背景-圆角

这就是规范所说的内容，因此这就是它应该起作用的方式。但这并不意味着Chrome会那样做。

5.3。切角

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

http://www.w3.org/TR/css3-background/#border-radius

父容器的边缘和角由被子元素覆盖，因此，只要将overflow值设置为not visible，就需要裁剪父元素的内容，例如：

  .parent {
    overflow: hidden;
    border-radius: 5px;
  }