应该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>元素(和大多数其他的东西)的默认overflowvisible , 规范说这是关于overflow: visible

可见
这个值表示内容没有被剪切,也就是说,它可能被渲染在块框之外。

接下来,在“边界和边框”模块中的§5.3angular落裁剪说:

一个框的背景,但不是它的边界图像,被剪切到适当的曲线(由'background-clip'确定)。 剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线上。 replace元素的内容总是被修剪为内容边缘曲线。 此外,边界曲线外的区域不代表元素接受鼠标事件。

我特别强调的这个句子提到,盒子的overflow值必须是非visible (意思是autohiddenscroll和其他),以便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元素的内容总是被修剪为内容边缘曲线。 此外,边界曲线外的区域不代表元素接受鼠标事件。

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

这个问题似乎指向同样的缺陷,显然这是一个错误。

CSS3的边界半径裁剪问题

编辑

伊克! BoltClock已经提到过这个问题,所以我会在这个主题上发布这个其他的SO问题,同时我也为此寻找一个spec的报价。 如何防止图像溢出CSS3的圆angular框?

规格链接

仅供参考,我将坚持相关的链接 – 但我找不到任何明确的例子,你已经给了。

CSS背景 – 圆angular

从语义上讲,最好简单地向内部div添加边界半径inheritance属性,因此新的类增加:

 .buffer { border-radius: inherit; } 

因此,对于其他情况,如果内容溢出并且想要查看所有内容,则可以使用overflow:auto。