2

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

示例：http: //jsfiddle.net/fE58b/1/

它在 IE9 和 FF7 中运行良好。

谢谢你。

4

3 回答 3

0

如果您只是将背景图像从移动#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;
}
于 2012-06-19T22:20:21.297 回答
0

所以，正如 Cristi 上面所说的，一些浏览器似乎在沿着父母的弯曲边界剪裁溢出的孩子方面有点麻烦。看来，为了（至少对于 Webkit）呈现受父边框半径影响的子溢出，父子和子都必须静态定位。

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

幸运的是，您可以使用绝对定位的祖父控件来控制其静态子元素的尺寸和位置，并rgba在背景和文本上模拟元素的不透明度。我碰巧有一个jsfiddle 片段演示了其中一些您可能会发现有用的变通方法。

于 2012-06-19T23:22:36.737 回答
0

用户关注解决边界问题

         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*/
于 2012-06-20T10:36:52.407 回答