Question

我有几个div，一个在另一个里面，我在外部div上使用border-radius和overflow: hidden，在内部div上创建一个圆形掩码。

但是，当在子div上使用backface-visibility: hidden;时，border-radius不再适用。

Here's an example of the issue，可以在chrome和safari中看到

Answer 1

看起来这是webkit中的一个错误，它会在chromium issue track上被跟踪。看起来没有任何修复的迹象很快就会被合并。

Answer 2

好的，我已经尝试了一些你的例子。 W3schools声称“背面能见度：隐藏;”尚未得到很好的支持。这个属性与3d变换有关，对吗？特别轮换。

我找到了一个解决方法。在蒙版div上应用“背面可见性”，而不是内部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);
}

Answer 3

在Chrome问题的@Rob链接跟踪中，user viktorli还添加了一种解决方法。

只需在不遵守transform规则的流氓孩子的父元素上添加overflow:hidden规则，它就会被修复！类似的东西：

-webkit-transform: scale(1);

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

3 个答案: