CSS3 边框半径裁剪问题

Question

我有一个边框半径设置为某个值（比如说 10 像素）的 div，以及一个嵌套的 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

我只是想插话这个问题，因为我发现这个有类似的问题。

在溢出设置为滚动的 div 中，border-radius 不会在滚动时剪切内容，除非内容滚动到绝对顶部或底部。即使那样，只有当我将文档滚动到绝对顶部或底部时，剪辑有时才会重新出现。

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

在 Mac 上的 Chrome、Safari 和 Firefox 中测试。

Answer 2

我来这里是为了寻找答案，因为我在 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>

Answer 3

如果您在两个元素上删除position: relative;，则外部元素会将子元素夹在圆角周围。不知道为什么，如果它是一个错误。

Answer 4

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