应该border-radius剪辑内容吗？ [英] Should border-radius clip the content?

问题描述

当容器 border-radius ？

时， HTML和CSS示例：

Sample HTML and CSS:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

正如你所看到的，我使用 border-radius .progressbar ），但内容（ .buffer ）在容器外。我在Google Chrome上看到这个。

As you can see I use border-radius on the container (.progressbar), but the content (.buffer) goes 'outside' the container. I'm seeing this on Google Chrome.

这是预期的行为吗？

这不是关于如何解决它，这是关于它是否应该这样工作。

P.S. This isn't about how to fix it, this is about whether it should work like this.

推荐答案

这是预期的行为吗？

Is this the expected behavior?

是的，听起来很疯狂，实际上是。原因如下：

Yes, as crazy as it sounds, it actually is. Here's why:

< div> 元素（和大多数其他东西）是 visible 和 spec 说明了 overflow：visible ：

The default overflow for <div> elements (and most other things) is visible, and the spec says this about overflow: visible:

可见

此值表示内容未被裁剪，即可能在框框外显示。

visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

反过来，背景和边框模块中的§5.3角剪裁

In turn, §5.3 Corner clipping in the Backgrounds and Borders module says:

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

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

ve强调特别提到框的 overflow 值必须是除 visible 之外的其他值（即 auto ， hidden ， scroll

The sentence that I've emphasized specifically mentions that the overflow value of the box must be something other than visible (that means auto, hidden, scroll and others) in order for the corners to clip its children.

如果框被定义为具有可见溢出，就像我说的大多数视觉元素的默认值，那么内容不应该被剪辑所有。这就是为什么 .buffer 的正方形角落在 .progressbar 的圆角上。

If the box is defined to have visible overflow, which like I said is the default for most visual elements, then the content is not supposed to be clipped at all. And that's why the square corners of .buffer go over the rounded corners of .progressbar.

因此，最简单的方法是在 .progressbar 中剪辑 .buffer s圆角是向 .progressbar 中添加<$ hc =http： ：//jsfiddle.net/BoltClock/u6xkd/24>这个更新的小提琴。

Consequently, the simplest way to get .buffer to clip within .progressbar's rounded corners is to add an overflow: hidden style to .progressbar, as shown in this updated fiddle.

这篇关于应该border-radius剪辑内容吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！