Html CSS3边界半径剪裁问题

我有一个边界半径设置为某个值（比如10px）的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>
<!-- ... -->

家长{
显示：块；
位置：相对位置；
宽度：100px；
高度：100px；
边界半径：10px；
背景：#0000ff；
溢出：隐藏；
}
内分区{
显示：块；
位置：相对位置；
宽度：100%；
身高：100%；
背景：#ff0000；
}

我注意到，尽管已将“溢出”设置为“隐藏”，但父对象不会在圆角处剪裁子对象。另一个stackoverflow线程表示此行为是“按设计”：

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

…我忍不住注意到“拐角剪裁”部分下的以下描述：

剪裁到边框的其他效果 或填充边缘（例如“溢出” 除“可见”）外，还必须进行剪辑 走弯路。被替换的内容 元素始终修剪为最短的长度 内容边曲线

---

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

这不是故意的，这是有道理的。在任何WebKit浏览器中都可以正常工作。在Firefox中，您也必须将边框半径添加到包含的元素中，或者。

如果删除

位置：相对在两个元素上，外部元素围绕圆角剪裁子元素。不知道为什么，也不知道这是否是一个bug。
我来这里寻找答案，因为我在Chrome 18中遇到了类似的问题

我试着制作一个圆形的盒子，里面有两个元素——标题和索引编号——索引编号绝对位于盒子的左下角

我注意到的是，如果我有这样的HTML，则title元素会在圆角（边框半径）外出血，即使父元素上的overflow设置为hidden：

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


箱名
1.

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

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


箱名
1.
我只是想插嘴一下，因为我发现这有类似的问题

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

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

在Mac上的Chrome、Safari和Firefox上进行了测试。
我很想相信这一点，但我现在盯着webkit，仍然看到了问题=/然而，看到它被列为一个bug，这让我松了一口气@cdata有趣-如果你在样式表中同时使用了位置：相对线，那么它在Chrome 6中可以正常工作。哇，这是完全正确的。。因此，需要注意的是，定位需要是静态的，以便正确地剪裁拐角？对我来说还是有点可笑。。。当然，这在Firefox中仍然失败。谢谢你的帮助！我会坚持一点，等待其他答案。@cdata是的，似乎是这样，我无法通过谷歌找到任何解释定位如何影响剪辑的内容，我将尝试在CSS3列表上发布，看看他们是否有任何答案。@cdata有人问我是否可以将您的测试页面的修改版本添加到W3C CSS测试套件中，这将意味着把它放在这个许可证下：如果你不同意，请告诉我。我上传了一个快速页面来演示我的问题：你能用一个片段来编辑这个问题吗？你的链接已断开。