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

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

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

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

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

剪辑到边框的其他效果或填充边缘（如'溢出' 除了“可见”之外，还必须剪辑到曲线。替换的内容元素总是被修剪为内容边缘曲线

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

Answer 1

如果您删除两个元素上的position: relative;，则外部元素会围绕圆角修剪子项。不知道为什么，如果它是一个bug。

Answer 2

这不是设计，有一个outstanding defect in Firefox。应该可以在任何WebKit浏览器中正常工作。在Firefox中，您还必须为包含的元素添加边框半径，或use some sort of hack。

Answer 3

因为我发现了类似的问题，所以只是想加入这个问题。

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

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

在Mac上测试Chrome，Safari和Firefox。

Answer 4

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

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

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

<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>

CSS3 border-radius剪切问题

4 个答案: