CSS3边界半径剪裁问题

这不是故意的,而是 outstanding defect in Firefox use some sort of hack .

如果你移除 position: relative; 在两个元素上,外部元素将子元素夹在圆角周围。不知道为什么,如果是虫子。

我来这里寻找答案,因为我在Chrome18上也遇到了类似的问题。

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

我注意到,如果我有这样的HTML,title元素会在圆角(border radius)外出血,即使父元素上的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>

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

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

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

在云雀上,我给元素添加了一个透明的边框,这似乎加强了拐角处的裁剪。因为我在元素周围已经有了一些空间,所以我把它切成两半,然后把剩下的部分应用到边框的厚度上。不太理想,但我最终得到了我想要的结果。

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