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.这不是关于如何解决它，这是关于它是否应该像这样工作。

来源

2011-12-20 PeeHaa

jsFiddle死了。 – SquareCat 2012-11-18 13:44:22

@CummanderCheckov tnx通知我。让我再次设置它。虽然所有的信息* *在我的问题（正是因为这个原因），我已经更新它。 – PeeHaa 2012-11-18 14:04:00

这是预期的行为？

是的，它听起来很疯狂，实际上是。这里的原因：

默认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。

来源

2011-12-20 21:37:02 BoltClock

太棒了！糟糕的问题（是的，我知道去问那些制作规格的人），但你能否想到为什么替换的元素会被截断的原因？PS这是一个额外的问题:) – PeeHaa 2011-12-20 21:42:07

@PeeHaa：被取代的内容（例如，无论在“”中链接的图像）都必须剪裁，因为这些元素只能包含替换的内容。如果没有，你将无法将'border-radius'应用于图像等。 – BoltClock 2011-12-20 21:45:44

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

CSS3 border-radius clipping issues

编辑

伊克！ BoltClock已经提到过这个问题，所以我会在这个主题上发布这个其他的SO问题，同时我也在此寻找一个spec的报价。 How do I prevent an image from overflowing a rounded corner box with CSS3?

规格链接

仅供参考，我会坚持相关链接 - 但我找不到任何明确的给你给出的例子。

CSS Backgrounds - Rounded Corners

来源

2011-12-20 21:26:35 isNaN1247

这个问题的提问者错误地解释了CSS3规范，并且引用的错误涉及“不可见”的“溢出”值，在这里不是这种情况。 – BoltClock 2011-12-20 21:29:11

在我读过的规范中：“被替换元素的内容总是被修剪为内容边缘曲线。”这意味着它应该切断内容。或者我读错了：P – PeeHaa 2011-12-20 21:29:53

@PeeHaa：'div'不是被替换的元素，所以这一点是不相关的。 – BoltClock 2011-12-20 21:30:20

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

5.3。 Corner Clipping

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

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

来源

2011-12-20 21:29:56 Filip

对于任何人想知道的修复将是什么。最简单的方法是编辑CSS。

在给定的，这将是一个合适的修复程序的例子：

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

来源

2011-12-20 21:36:48 Owen

从语义上来说，这是最好的一个简单的边界半径继承属性添加到内格，因此新类加法：

.buffer { 
    border-radius: inherit; 
}

因此，对于别人的情况下，可以保留使用溢出：自动如果内容溢出你的frae，你想看到的一切。

来源

2014-07-10 08:20:36

我发现这对于某些不尊重'overflow：hidden'的内容非常有用 - 比设置border-radius更清洁孩子数量，我一直希望避免。 – Iiridayn 2016-03-18 19:53:31

这是不正确的。具有相同'border-radius'属性的子内容有时不会覆盖父背景。尝试一下血红的父母背景，你会看到它。 – Rockallite 2017-07-14 08:40:57

border-radius剪辑内容？

回答

相关问题