Question

当容器有border-radius时，我的容器内容是否应该被切断？

示例HTML和CSS：

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

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

如您所见，我在容器（border-radius），but the content (.buffer) goes 'outside' the container上使用.progressbar。我在谷歌浏览器上看到了这一点。

这是预期的行为吗？

P.S。这不是关于如何解决它，这是关于它是否应该像这样工作。

Answer 1

这是预期的行为吗？

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

overflow元素（以及大多数其他内容）的默认<div>为visible，而spec则说明overflow: visible：

<强>可见
该值表示内容未被剪裁，即，它可以在块框外呈现。

反过来，背景和边框模块中的§5.3 Corner clipping说：

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

我强调的句子特别提到框的overflow值必须是visible以外的值（表示auto，hidden，{{ 1}}和其他人）为了让角落剪掉它的孩子。

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

因此，让.progressbar在.buffer的圆角内剪切的最简单方法是向.progressbar添加overflow: hidden样式，如{{3}所示}}

Answer 2

对于任何想知道什么是修复的人。最简单的方法是编辑css。

在给出的示例中，这将是一个合适的修复：

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

Answer 3

从语义上讲，最好简单地将border-radius inherit属性添加到内部div，因此新的类添加：

.buffer {
    border-radius: inherit;
}

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

Answer 4

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

CSS3 border-radius clipping issues

修改

伊克！ BoltClock已经提到这是为了这个，所以我会发布关于这个话题的其他SO问题，同时我也在寻找一个规范报价。 How do I prevent an image from overflowing a rounded corner box with CSS3?

规范链接

仅供参考，我会坚持相关链接 - 但我找不到任何明确的例子。

CSS Backgrounds - Rounded Corners

Answer 5

这是规范所说的，所以这是它应该工作的方式。但这并不意味着Chrome就是这样做的。

5.3。角落剪辑

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

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

Answer 6

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

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

边界半径应该剪辑内容吗？

6 个答案: