应该border-radius剪辑内容吗？
当容器有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; }
正如你所看到的，我在容器（ .progressbar ）上使用了border-radius ， 但内容（ .buffer ）在容器外面 。 我在Google Chrome浏览器上看到了这一点。
这是预期的行为？
PS这不是关于如何解决它，这是关于它是否应该这样工作。
这是预期的行为？
是的，听起来很疯狂，实际上是。 原因如下：
对于<div>元素（和大多数其他的东西）的默认overflow是visible ， 规范说这是关于overflow: visible ：
可见
这个值表示内容没有被剪切，也就是说，它可能被渲染在块框之外。
接下来，在“边界和边框”模块中的§5.3angular落裁剪说：
一个框的背景，但不是它的边界图像，被剪切到适当的曲线（由'background-clip'确定）。 剪切到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线上。 replace元素的内容总是被修剪为内容边缘曲线。 此外，边界曲线外的区域不代表元素接受鼠标事件。
我特别强调的这个句子提到，盒子的overflow值必须是非visible （意思是auto ， hidden ， scroll和其他），以便angular落剪切其子元素。
如果该框被定义为具有可见的溢出，就像我说的是大多数视觉元素的默认值，那么内容不应该被截断。 这就是为什么.buffer的方形angular落.buffer的圆angular。
因此，获取.buffer在.progressbar的圆angular内剪辑的最简单的方法是在.progressbar中添加一个overflow: hidden样式， 如此更新的小提琴中所示。
对于任何人想知道什么是修补程序。 最简单的方法是编辑CSS。
在这个例子中，这将是一个合适的修复：
.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }
这是规范说的，所以这是它的工作方式。 但这并不意味着Chrome就是这样做的。
5.3。 angular落裁减
一个框的背景，但不是它的边界图像，被剪切到适当的曲线（由'background-clip'确定）。 剪切到边界或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线上。 replace元素的内容总是被修剪为内容边缘曲线。 此外，边界曲线外的区域不代表元素接受鼠标事件。
这个问题似乎指向同样的缺陷，显然这是一个错误。
CSS3的边界半径裁剪问题
编辑
伊克！ BoltClock已经提到过这个问题，所以我会在这个主题上发布这个其他的SO问题，同时我也为此寻找一个spec的报价。 如何防止图像溢出CSS3的圆angular框？
规格链接
仅供参考，我将坚持相关的链接 – 但我找不到任何明确的例子，你已经给了。
CSS背景 – 圆angular
从语义上讲，最好简单地向内部div添加边界半径inheritance属性，因此新的类增加：
.buffer { border-radius: inherit; }
因此，对于其他情况，如果内容溢出并且想要查看所有内容，则可以使用overflow：auto。
