Css 如果子元素上隐藏背面可见性，则不应用边框半径

我有两个div，一个在另一个里面，我在外部div上使用

边界半径

和

溢出：隐藏

，在内部div上创建一个圆形遮罩

但是，当使用

背面可见性：隐藏时，它可以工作

在子div上，不再应用

边界半径

---

，可以在chrome和safari中看到，看起来这是webkit中的一个bug，它正在网络上被跟踪。看起来很快就没有合并修复程序的迹象。

好的，我已经用您的示例尝试了一些方法。W3S声明“背面可见性：隐藏；”尚未得到很好的支持。这个属性与三维变换有关，对吗？特别是旋转。

我找到了一个解决办法。在掩码div上应用“背面可见性”，而不是内部可见性。如果你这样做，你会看到它也打破了这一轮。但是，如果在遮罩div上应用旋转变换，则圆角边框将显示回法线。

因此，如果确实要隐藏背面而不丢失半径，请仅在开始旋转图元后应用此样式。看看这个：

<p>Backface hidden:</p>
<div class="ex">
  <div class="mask bfh">
    <div class="bg"></div>
  </div>
</div>

---

在关于chrome问题的@Rob链接轨道中，还有一个由添加的解决方法

只需在rogue子元素的父元素上添加一个

transform

规则，而不遵守

溢出：隐藏

规则，它就会被修复！比如：

---

-webkit转换：缩放（1）
谢谢您的帮助，请用一个完整的示例来尝试一下。
.bfh {
  -webkit-backface-visibility:hidden;
  -webkit-transform: rotateY(30deg);
}