Css 边框半径不影响内部div（Chrome、Opera）的背景

在Chrome和Opera中是否可以在div上使用边框半径，以便内部div背景也会受到影响？如果没有，如何才能达到这种效果

例如：

它在IE9和FF7中运行良好

---

谢谢。

如果您只需将背景图像从内容移动到。框：

此外，如果确实需要在单独的div中添加边框，则始终可以在框外添加新div：

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

---

如果您只需将背景图像从“内容”移动到.box，则此功能有效：

此外，如果确实需要在单独的div中添加边框，则始终可以在框外添加新div：

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

---

因此，正如克里斯蒂在上面所说的，一些浏览器似乎在沿着父母的曲线边界剪裁溢出的孩子时有点麻烦。看来，为了至少让Webkit呈现受父边界半径影响的子溢出，父级和子级都必须静态定位

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

---

幸运的是，您可以使用绝对定位的祖父母控制其静态子对象的尺寸和位置，并使用背景和文本上的rgba模拟元素不透明度。我正好有一个演示这些解决方法的例子，你可能会觉得它们很有用。

因此，正如克里斯蒂在上面所说的，一些浏览器似乎在沿着父母的弯曲边界剪裁溢出的孩子时有点麻烦。看来，为了至少让Webkit呈现受父边界半径影响的子溢出，父级和子级都必须静态定位

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

---

幸运的是，您可以使用绝对定位的祖父母控制其静态子对象的尺寸和位置，并使用背景和文本上的rgba模拟元素不透明度。我正好有一个演示了其中一些解决方法，您可能会发现这些方法很有帮助。

用户跟随解决边界辐射问题

         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: 20%;        /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
    -webkit-border-radius: 20%;      *FOR ALL OHTER OLD BROWSER*/
    -moz-border-radius: 20%;     /* FOR MOZILLA FF*/

---

---

你也试过将边界半径应用于内部div吗？当然，但只有在大小相同的情况下才会起作用，但情况并非如此。我知道你没有问Safari，它也是类似Chrome的Webkit，但我注意到，当你将20%转换为像素时，边界半径就开始起作用了。@Sparky672:我刚刚安装了Safari来试用，但它对我不起作用。它不是一个完整的解决方案。当它被设置为20%时，我看到所有东西都是方形的。当它设置为20px时，我在div上看到圆角，但图像仍然没有被裁剪。您是否也尝试过将边框半径应用于内部div？当然，但只有在大小相同的情况下才有效，但不是这种情况。我知道您没有询问Safari，它也是类似于Chrome的Webkit，但我注意到，当你将20%转换为像素时，边界半径就开始起作用了。@Sparky672:我刚刚安装了Safari来试用，但它对我不起作用。它不是一个完整的解决方案。当它被设置为20%时，我看到所有东西都是方形的。当设置为20px时，我在分区上看到圆角，但图像仍然没有被裁剪。在Safari中没有区别。我忘了提到，背景必须在单独的分区中。对不起，我错了。你是说在与边框分开的分区中？还有原因吗？@Sparky672:他没有提到需要Safari支持。@jsalonen:是的，没错。因为我正在使用jquery插件生成背景。插件必须在一个内部分区中才能工作。在Safari中没有区别。我忘了提到，背景必须在一个单独的分区中。对不起，我错了。你是说在一个与边框分开的分区中？还有原因吗？@Sparky672:他没有提到需要Safari支持。@jsalonen:是的，没错。因为我正在使用jquery插件生成背景。插件必须在一个内部div中才能工作。我设置不透明度只是为了演示边界半径溢出。“静态定位”是什么意思？以前从未使用过，但它似乎不起作用。我创建了一个更新的JSFIDLE，它已经在Chrome、Safari和Opera中测试过，并且在前两个版本中有效。请注意，删除了“不透明度”属性，取而代之的是半透明背景图像。老实说，我很抱歉

---

我不知道歌剧是怎么回事。据我所知，让Presto按预期渲染元素的唯一方法是对内部div及其容器应用边界半径。我设置不透明度只是为了演示边界半径溢出。“静态定位”是什么意思？以前从未使用过，但它似乎不起作用。我创建了一个更新的JSFIDLE，它已经在Chrome、Safari和Opera中测试过，并且在前两个版本中有效。请注意，删除了“不透明度”属性，取而代之的是半透明背景图像。老实说，我不确定歌剧是怎么回事。据我所知，让Presto按预期渲染元素的唯一方法是对内部div及其容器应用边界半径。