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

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>

正如您所看到的，我在容器上（.progressbar）使用了border-radius，但内容（.buffer）超出了容器的范围。 我在Google Chrome中看到了这种情况。

这是否是预期行为？

附言：这不是关于如何修复它的问题，而是关于它是否应该像这样工作的问题。

- PeeHaa

---

@CummanderCheckov 谢谢你通知我。让我重新设置一下。虽然所有的信息都在我的问题中（正是为了这个原因），我已经更新了它。 - PeeHaa

Answer 1

这是预期的行为吗？

是的，尽管听起来很疯狂，实际上确实如此。原因如下： <div>元素（以及大多数其他元素）的默认overflow是visible，spec关于overflow: visible的解释如下：

“visible：表示内容不被剪切，即可以在块框外呈现。”

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

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

我特别强调的那句话指出，框的overflow值必须是auto、hidden、scroll等其他值之一，而不能是visible，才能使角落裁剪其子元素。

如果定义的框具有可见的溢出，这就像我说的大多数视觉元素的默认值一样，那么内容就不应该被剪切。这就是为什么.buffer的正方形角落会超过.progressbar的圆角的原因。

因此，使.buffer在.progressbar的圆角内剪切的最简单方法是向.progressbar添加一个overflow: hidden样式，如此更新的fiddle所示。

- BoltClock

---

好的！不好的问题（是的，我知道去问制定规范的人），但你能想到为什么替换元素会被剪裁吗？附言：这是一个奖励问题 :) - PeeHaa

@PeeHaa：被替换的内容（例如，任何在<img src="...">中链接的图像）必须被剪裁，因为这些元素只能包含该替换内容。如果不这样做，您将无法对图像应用border-radius等效果。 - BoltClock

Answer 2

如果有人想知道如何进行修复，最简单的方法是编辑CSS。

在给出的示例中，以下修复方法是合适的：

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

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

- owenmelbz

Answer 3

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

.buffer {
    border-radius: inherit;
}

因此，在其他情况下，如果内容超出了框架并且您想要查看所有内容，则可以保留使用overflow：auto。

该技术与IT相关。请注意，HTML标记将被保留。

- Stéphane de Luca

---

我发现这对一些不遵守 overflow: hidden 的内容非常有用——比我本来想要避免的按数量在子元素上设置 border-radius 要干净得多。 - Iiridayn

这是不正确的。有相同 border-radius 属性的子元素有时不会完全覆盖父元素背景。试试用血红色作为父元素背景，你就会看到这个问题。 - Rockallite

Answer 4

由于拼布元素覆盖了父容器的边缘和角落，因此需要裁剪父元素的内容，只要设置 overflow 的值不是 visible 即可，例如：

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

- Cui Yang

Answer 5

这个问题似乎指向同样的缺陷，很明显这是一个bug。

CSS3边框半径剪切问题

编辑

哎呀！BoltClock提到了这是有意的，所以我会发布另一个有关此主题的SO问题，同时我也在寻找有关此主题的规范引用。 如何使用CSS3防止图像溢出圆角框？

规范链接

仅供参考，我将把相关链接放在这里 - 但我找不到任何明确涉及你给出例子的内容。

CSS背景 - 圆角

- isNaN1247

---

那个提问者误解了CSS3规范，被引用的错误涉及到一个不是visible的overflow值，而这里并非如此。 - BoltClock

在我阅读的规范中写道：“替换元素的内容始终被修剪到内容边缘曲线。”这意味着它应该截断内容。或者我理解错了吗 :P - PeeHaa

@PeeHaa：div不是一个可替换元素，所以那一部分是无关紧要的。 - BoltClock

@BoltClock，抱歉我的无知。但是replaced elements是什么意思？ - PeeHaa

@PeeHaa：外部源定义外观的元素 - isNaN1247

Answer 6

这是规格说明所说的，因此它应该按照这种方式工作。但这并不意味着 Chrome 就是这样工作的。

“5.3. 角落裁剪”

盒子的背景（而不包括其边框图像）被裁剪到适当的曲线上（由“background-clip”确定）。其他剪切到边框或填充边缘的效果（例如‘overflow’除了‘visible’）也必须剪切到曲线上。替换元素的内容始终被修剪到内容边缘曲线。此外，边框边缘曲线外部的区域不会代表元素接受鼠标事件。

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

- Filip