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

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在container(.progressbar)上使用的那样,但是content(.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,如此更新的小提琴所示.

Answer 2

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

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

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

Answer 3

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

.buffer {
    border-radius: inherit;
}

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