border-radius剪辑内容?
当容器有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
),but the content (.buffer
) goes 'outside' the container上使用border-radius
。我在Google Chrome上看到了这一点。
这是预期的行为?
P.S.这不是关于如何解决它,这是关于它是否应该像这样工作。
这是预期的行为?
是的,它听起来很疯狂,实际上是。这里的原因:
默认overflow
为<div>
元素(和大多数其他的东西)是visible
和spec说,这大约overflow: visible
:
可见
该值指示的内容不会被截断,即,它可能在块框外呈现。
反过来,§5.3 Corner clipping在背景和边框模块说:
一个框的背景,但不是它的边界图像,剪裁到合适的曲线(由“背景剪辑”确定)。 剪切到边界或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线。替换元素的内容总是被修剪为内容边缘曲线。此外,边界边缘曲线外的区域不接受代表元素的鼠标事件。
,我已经特别强调提到盒子的overflow
值必须大于visible
以外的东西(这意味着auto
,hidden
,scroll
等),以便边角裁剪其子的句子。
如果该框被定义为有可见的溢出,就像我说的是大多数视觉元素的默认值,那么内容不应该被截断。这就是为什么.buffer
的方角越过.progressbar
的圆角。
因此,最简单的方式来获得.buffer
内.progressbar
的圆角裁剪是一个overflow: hidden
样式添加到.progressbar
,如图this updated fiddle。
这个问题似乎指向同样的缺陷,显然这是一个错误。
CSS3 border-radius clipping issues
编辑
伊克! BoltClock已经提到过这个问题,所以我会在这个主题上发布这个其他的SO问题,同时我也在此寻找一个spec的报价。 How do I prevent an image from overflowing a rounded corner box with CSS3?
规格链接
仅供参考,我会坚持相关链接 - 但我找不到任何明确的给你给出的例子。
这是规范说什么,所以这是应该的工作方式。但这并不意味着Chrome就是这样做的。
5.3。 Corner Clipping
一个框的背景,但不是它的边界图像,被剪切到适当的曲线(由'background-clip'确定)。剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线上。替换元素的内容总是被修剪为内容边缘曲线。此外,边界边缘曲线外的区域不接受代表元素的鼠标事件。
对于任何人想知道的修复将是什么。最简单的方法是编辑CSS。
在给定的,这将是一个合适的修复程序的例子:
.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }
从语义上来说,这是最好的一个简单的边界半径继承属性添加到内格,因此新类加法:
.buffer {
border-radius: inherit;
}
因此,对于别人的情况下,可以保留使用溢出:自动如果内容溢出你的frae,你想看到的一切。
我发现这对于某些不尊重'overflow:hidden'的内容非常有用 - 比设置border-radius更清洁孩子数量,我一直希望避免。 – Iiridayn 2016-03-18 19:53:31
这是不正确的。具有相同'border-radius'属性的子内容有时不会覆盖父背景。尝试一下血红的父母背景,你会看到它。 – Rockallite 2017-07-14 08:40:57
jsFiddle死了。 – SquareCat 2012-11-18 13:44:22
@CummanderCheckov tnx通知我。让我再次设置它。虽然所有的信息* *在我的问题(正是因为这个原因),我已经更新它。 – PeeHaa 2012-11-18 14:04:00