CSS border-radius 应该裁剪内容吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8582176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should border-radius clip the content?
提问by PeeHaa
Shouldn't the content of my container be cut off when the container has border-radius?
当容器有 时，我的容器中的内容不应该被切断border-radius吗？
Sample HTML and CSS:
示例 HTML 和 CSS：
.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }<div class="progressbar">
<div class="buffer"></div>
</div>As you can see I use border-radiuson the container (.progressbar), but the content (.buffer) goes 'outside' the container. I'm seeing this on Google Chrome.
如您所见，我border-radius在容器 ( .progressbar) 上使用，但内容 ( .buffer) 位于容器“外部”。我在谷歌浏览器上看到这个。
Is this the expected behavior?
这是预期的行为吗？
P.S. This isn't about how to fix it, this is about whether it should work like this.
PS 这不是关于如何修复它，而是关于它是否应该像这样工作。
回答by BoltClock
Is this the expected behavior?
这是预期的行为吗？
Yes, as crazy as it sounds, it actually is. Here's why:
是的，尽管听起来很疯狂，但实际上确实如此。原因如下：
The default overflowfor <div>elements (and most other things) is visible, and the specsays this about overflow: visible:
默认overflow的<div>元素（和大多数其他的东西）是visible和规范说这约overflow: visible：
visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
可见
该值表示内容未被剪裁，即，它可以在块框之外呈现。
In turn, §5.3 Corner clippingin the Backgrounds and Borders module says:
反过来，背景和边框模块中的§5.3 角剪裁说：
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.
一个框的背景，而不是它的边框图像，被剪裁到适当的曲线（由'background-clip'确定）。裁剪到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须裁剪到曲线。替换元素的内容总是修剪到内容边缘曲线。另外，边框边缘曲线外的区域不接受代表元素的鼠标事件。
The sentence that I've emphasized specifically mentions that the overflowvalue of the box must be something other than visible(that means auto, hidden, scrolland others) in order for the corners to clip its children.
我特别强调的那句话提到，overflow框的值必须是visible（即auto、hidden、scroll和其他）以外的值，以便角剪掉它的孩子。
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 .buffergo over the rounded corners of .progressbar.
如果框被定义为具有可见溢出，就像我说的那样是大多数视觉元素的默认值，那么内容根本不应该被剪裁。这就是为什么 的方角.buffer超过 的圆角的原因.progressbar。
Consequently, the simplest way to get .bufferto clip within .progressbar's rounded corners is to add an overflow: hiddenstyle to .progressbar, as shown in this updated fiddle.
因此，在的圆角.buffer内进行剪辑的最简单方法.progressbar是向 中添加overflow: hidden样式.progressbar，如此更新的 fiddle所示。
回答by Owen
For anybody wondering what a fix would be. The easiest way would be to edit the css.
对于任何想知道修复是什么的人。最简单的方法是编辑css。
In the example given this would be a suitable fix:
在给出的示例中，这将是一个合适的修复：
.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }
回答by Stéphane de Luca
Semantically speaking, it's best to simply add a border-radius inherit property to the inner div, hence the new class addition:
从语义上讲，最好简单地向内部 div 添加一个 border-radius 继承属性，因此添加了新的类：
.buffer {
border-radius: inherit;
}
As a consequence, for others situation, you can preserve the use of overflow: auto if the content overflows your frae and you want to see everything.
因此，对于其他情况，如果内容溢出您的框架并且您想查看所有内容，您可以保留使用 overflow: auto 。
回答by isNaN1247
This question seems to point to the same defect, apparently this is a bug.
这个问题似乎指向相同的缺陷，显然这是一个错误。
CSS3 border-radius clipping issues
Edit
编辑
Eek! BoltClock has mentioned that this is indended so I'll post this other SO question on the topic whilst I also hunt for a spec quote on this. How do I prevent an image from overflowing a rounded corner box with CSS3?
哎呀！BoltClock 已经提到这是指定的，因此我将在该主题上发布另一个 SO 问题，同时我也在寻找有关此的规范引用。 如何使用 CSS3 防止图像溢出圆角框？
Specification Link
规格链接
Just for reference, I'll stick the relevant link in - but I can't find anything explicit to the example you've given.
仅供参考，我将粘贴相关链接 - 但我找不到任何与您给出的示例相关的内容。
回答by Filip
This is what the specifications says, so this is the way it should work. But that doesn't mean that Chrome does it like that.
这就是规范所说的，所以这就是它应该工作的方式。但这并不意味着 Chrome 会这样做。
5.3. Corner Clipping
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.
5.3. 角剪裁
一个框的背景，而不是它的边框图像，被剪裁到适当的曲线（由'background-clip'确定）。裁剪到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须裁剪到曲线。替换元素的内容总是修剪到内容边缘曲线。另外，边框边缘曲线外的区域不接受代表元素的鼠标事件。
