当容器中有border-radius个时，我的容器中的内容物不应该被切断吗？
.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,but the content (.buffer) goes 'outside' the container.我在谷歌Chrome上看到了这个.
这是预期的行为吗？
另外，这不是关于如何修复它，这是关于它是否应该像这样工作.
这是预期的行为吗？
是的，尽管听起来很疯狂，但事实上确实如此.原因如下:
<div>个元素(以及大多数其他元素)的默认值overflow是visible，spec表示大约overflow: visible:
visible
该值表示内容未被剪裁，即可能在挡路框之外呈现.
反过来，背景和边界模块中的§5.3 Corner clipping表示:
长方体的背景，而不是它的边框图像，被剪裁到适当的曲线上(由"背景剪裁"确定).Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve.替换元素的内容始终修剪为内容边缘曲线.此外，边界边缘曲线之外的区域不接受代表元素的鼠标事件.
我强调的这句话特别提到，盒子的overflow值必须是visible以外的值(即auto、hidden、scroll和其他值)，才能使角剪辑其子对象.
如果框被定义为有可见溢出，就像我说的，这是大多数视觉元素的默认值，那么内容根本不应该被剪裁.这就是为什么.buffer的方角大于.progressbar的圆角.
因此，让.buffer在.progressbar的圆角内剪裁的最简单方法是在.progressbar中添加overflow: hidden样式，如this updated fiddle所示.