Css 边界半径是否应该剪辑内容？

当容器具有

边界半径时，容器中的内容不应该被切断吗

HTML和CSS示例：

.progressbar{高度：5px；宽度：100px；边框半径：5px；}
.buffer{宽度：25px；高度：5px；背景：#999999；}
这个问题似乎指向了相同的缺陷，显然这是一个bug


编辑

哎呀！BoltClock提到这是非故意的，所以我会在这个主题上发布另一个so问题，同时我也会在这个主题上寻找规范报价。

规范链接

仅供参考，我将插入相关链接-但我找不到任何与您给出的示例明确相关的内容

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

5.3。剪角

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

任何想知道解决方案的人都可以。最简单的方法是编辑css

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

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

这是预期的行为吗

是的，尽管听起来很疯狂，但事实上确实如此。原因如下：

元素（以及大多数其他内容）的默认
溢出
是
可见的
，说明了
溢出：可见的
：

可见

此值表示内容未被剪裁，即，它可能在块框外呈现

反过来，在背景和边框模块中说：

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

我强调的这句话特别提到了框的
溢出
值必须不是
可见
（这意味着
自动
，
隐藏
，
滚动
和其他）以便角剪辑其子对象

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

因此，获取
.buffer
以剪裁
.progressbar
圆角的最简单方法是将
溢出：隐藏的
样式添加到
.progressbar
，如所示。
从语义上讲，最好只需将边界半径继承属性添加到内部div，因此增加了新的类别：

.buffer {
    border-radius: inherit;
}

因此，对于其他情况，如果内容溢出您的frae，并且您希望看到所有内容，您可以保留溢出：auto的使用。
父容器的边和角被缝合线元素覆盖，因此需要裁剪父元素的内容，只要
溢出
值设置为不可见
，例如：

.parent{
溢出：隐藏；
边界半径：5px；
}
该问题的提问者误解了CSS3规范，所引用的错误涉及到一个不可见的
溢出
值，在我读过的规范中：
被替换元素的内容总是被修剪到内容边缘曲线。
这意味着它应该切断内容。还是我看错了P@PeeHaa：
div
不是替换的元素，所以该位不相关。@请原谅我的无知。但是被替换的元素是什么意思呢？@PeeHaa:太好了！这个问题很糟糕（是的，我知道去问问制定规范的人），但是你能想出一个被替换元素被剪掉的原因吗？PS这是一个额外的问题：）@PeeHaa：被替换的内容（例如，
中链接的任何图像）必须被剪裁，因为这些元素只能包含被替换的内容。如果没有，您将无法将
边界半径
应用于图像等@CummanderCheckov tnx以通知我。让我再安排一下。虽然所有信息都在我的问题中（只是出于这个原因），但我已经对其进行了更新。我发现这对于一些不遵守
溢出：隐藏
的内容很有用-比我一直希望避免的按数字设置孩子的边界半径要干净得多。这是不正确的。具有相同的
边框半径
属性的子内容有时不会覆盖父背景。用血红色的背景试试，你会看到的。