CSS3边界半径剪切问题 [英] CSS3 border-radius clipping issues

问题描述

我有一个div，border-radius设置为某个值（比如说10px），以及一个嵌套的div，它的父元素的全部宽度和高度。

I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->

我注意到父母不会将孩子夹在圆角周围，尽管溢出被设置隐藏。另一个stackoverflow线程表明此行为是按设计：

I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":

如何防止图像溢出CSS3的圆角框？

How do I prevent an image from overflowing a rounded corner box with CSS3?

但是，在挖掘CSS3背景和边框的工作草稿...

However, upon digging up the working draft for CSS3 backgrounds and borders...

http：// www。 w3.org/TR/css3-background/#corner-clipping

...我忍不住请注意角剪辑部分下面的说明：

...I couldn't help but notice the following description under the "corner clipping" section:

剪切到边框
或填充边缘的其他效果作为'overflow'
而不是'visible'）也必须剪辑
到曲线。被替换的
元素的内容总是被修剪为
内容边缘曲线

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

内容是否应该被剪裁到角落？我在看过时的信息吗？我这样做错了吗？

So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?

推荐答案

这不是设计，有一个 Firefox中的突出缺陷。应该在任何WebKit浏览器中正常工作。在Firefox中，您必须向包含的元素添加边框半径，或使用某种黑客。

It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.

这篇关于CSS3边界半径剪切问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！