CSS3 border-radius剪切问题

Question

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

<!-- ... -->
<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线程表明此行为是“按设计”：

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

然而，在挖掘CSS3背景和边界的工作草案时......

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

......我忍不住注意到“角落剪裁”部分下面的描述：

剪切到边框或填充边缘的其他效果（例如“溢出”除“可见”之外）也必须剪切到曲线。 替换元素的内容始终被修剪为内容边缘曲线

那我错过了什么？ 内容是否应该被剪切到角落？ 我在看过时的信息吗？ 我做错了吗？

Answer 1

如果你删除position: relative; 在两个元素上，外部元素围绕圆角修剪孩子。 不知道为什么，如果它是一个错误。

Answer 2

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

Answer 3

我只是想在这个问题上发表意见，因为我发现了类似的问题。

在溢出设置为滚动的div中，边框半径在滚动时不会剪切内容，除非内容滚动到绝对顶部或底部。 即使这样，如果我将文档滚动到绝对顶部或底部，有时也会再次出现裁剪。

在云雀上，我为元素添加了一个透明边框，这似乎强制了角落的剪裁。 由于我已经在元素周围留出了一些空间，我只将其切成两半并将剩余部分应用于边框厚度。 不理想，但我最终得到了我想要的结果。

在Mac上测试Chrome，Safari和Firefox。

Answer 4

我来到这里寻找答案，因为我在Chrome 18中遇到了类似的问题。

我试图有一个带有两个元素的圆形框 - 标题和索引号 - 索引号绝对位于框的左下角。

我注意到的是如果我有这样的HTML，标题元素会在圆角（边界半径）之外出血，即使溢出被设置为隐藏在父元素上：

<a>
    <div style="overflow:hidden; border-radius:15px; position:relative;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>

但如果我将相对定位向上移动一个父元素，一切看起来都很好：

<a style="position:relative;">
    <div style="overflow:hidden; border-radius:15px;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>