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

【问题标题】：border-radius doesn't affect the background of an inner div (Chrome, Opera)border-radius 不影响内部 div 的背景（Chrome、Opera）
【发布时间】：2012-06-19 22:15:10
【问题描述】：

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

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

它在 IE9 和 FF7 中运行良好。

谢谢。

【问题讨论】：

您是否尝试过将边界半径也应用于内部 div？
当然可以，但只有在尺寸相同的情况下才会起作用，但情况并非如此。
我知道您没有询问 Safari，它也是类似于 Chrome 的 Webkit，但我注意到当您将 20% 转换为像素时，border-radius 开始工作。
@Sparky672：我刚刚安装了 Safari 来试用它，但它对我不起作用。
这不是一个完整的解决方案。当它设置为20% 时，我看到所有东西都是方角。当它设置为20px 时，我看到div 上有圆角，但图像仍未裁剪。

标签： css

【解决方案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;
}

【讨论】：

在 Safari 中没有区别。
我忘了说，背景必须在一个单独的 div 中。对不起，我的错。
你的意思是在一个与边界分开的 div 中？还有为什么？
@Sparky672：他没有提到需要 Safari 支持。
@jsalonen：是的，完全正确。因为我使用 jquery 插件来生成背景。它必须在一个内部 div 中才能使插件工作。

【解决方案2】：

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

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

幸运的是，您可以使用绝对定位的祖父控件来控制其静态子对象的尺寸和位置，并在背景和文本上使用rgba 来模拟元素的不透明度。我碰巧有一个jsfiddle snippet 展示了其中一些可能对您有帮助的解决方法。

【讨论】：

我设置不透明度只是为了演示边界半径溢出。 “静态定位”是什么意思？
以前没用过那个，但好像没用。
我已经创建了你的 JSFiddle 的更新版本，它已经在 Chrome、Safari 和 Opera 中进行了测试，并且可以在前两个中使用。 jsfiddle.net/fE58b/16（请注意删除了 opacity 属性以支持半透明背景图像）。老实说，我不确定与 Opera 有什么交易。据我所知，让 Presto 按预期渲染元素的唯一方法是将边界半径应用于内部 div 及其容器。

【解决方案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*/

【讨论】：