Question

是否可以在div上使用border-radius（在Chrome和Opera中），以便内部div背景也会受到影响？ 如果没有，还能达到这种效果吗？

在IE9和IE中运行良好FF7。

谢谢。

Answer 1

只需将背景图像从#content移动到.box：

即可

.box {
     background:url(...so_70s_background.jpg) top left repeat;
}

此外，如果你真的需要在单独的div中设置边框，你可以随时在框外添加新的div：

<div class="box-outer">
    <div class="box">
        <div id="content"></div>
    </div>
</div>

请务必申请：

.box-outer {
    width:500px;
    height:500px;
    position:absolute;
}

Answer 2

因此，正如克里斯蒂所说的那样，一些浏览器似乎在沿着父母的弯曲边界剪掉溢出的孩子时遇到了一些麻烦。看来，为了（至少Webkit）呈现由父边界半径影响的子溢出，父和子必须静态定位。

此外，即使使用这种静态定位，似乎为子元素设置不透明度值会导致它破坏其父元素的溢出边界（如果我不得不猜测，我想这与之有关）不透明度值触发硬件加速图形，在这种情况下，3D变换将产生相同的毛刺）。

幸运的是，您可以使用绝对定位的祖父母控制其静态子节点的尺寸和位置，并使用rgba对背景和文本进行模拟，以模拟元素不透明度。我恰好有一个jsfiddle snippet展示了一些你可能会觉得有用的解决方法。

Answer 3

用户关注解决边界半径问题

         border-radius: 20%;        /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
    -webkit-border-radius: 20%;      *FOR ALL OHTER OLD BROWSER*/
    -moz-border-radius: 20%;     /* FOR MOZILLA FF*/

border-radius不影响内部div的背景（Chrome，Opera）

3 个答案: