css - border-radius 不影响内部 div 的背景(Chrome、Opera)

Question

是否可以在 div 上使用 border-radius(在 Chrome 和 Opera 中)以便内部 div 背景也会受到影响？ 如果不是，如何才能达到这种效果？

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

它在 IE9 和 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;
}