如果子元素设置了backface-visibility:hidden，边框半径不会被应用。

Question

我有几个div，其中一个在另一个内部，我在外部的div上使用了border-radius和overflow: hidden来创建内部div上的圆形掩模。

它有效果，但是当在子div上使用backface-visibility: hidden;时，border-radius不再适用。 这里是问题的示例，可以在chrome和safari中看到。

- Rob

Answer 1

好的，我已经尝试了几个你的示例。W3schools指出，“backface-visibility:hidden;”目前还不被广泛支持。这个属性与3D变换有关，对吧？特别是旋转。

我找到了一个解决方法。在遮罩层div上应用“backface-visibility”，而不是内部div。如果你这样做，你会发现它也破坏了圆形边框。但是如果你在遮罩层div上应用旋转变换，圆角边框就会恢复正常。

所以，如果你真的想隐藏背面而不失去半径，请在开始旋转元素后才应用这个样式。看看这个：

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

还有 css：

.bfh {
  -webkit-backface-visibility:hidden;
  -webkit-transform: rotateY(30deg);
}

- LcSalazar

---

谢谢，我刚拿一个完整的例子试了试。 - Rob

Answer 2

在@Rob提到的Chrome问题的链接中，user viktorli添加了一个解决方法。只需在不遵守overflow:hidden规则的子元素的父元素上添加一个transform规则即可解决问题！类似这样：-webkit-transform: scale(1);

- Gruber

Answer 3

看起来这是Webkit中的一个bug，它正在chromium issue track上被追踪。看起来没有迹象表明修复将很快合并。

- Rob