我有几个div,一个在另一个里面,我在外部div上使用border-radius
和overflow: hidden
,在内部div上创建一个圆形掩码。
但是,当在子div上使用backface-visibility: hidden;
时,border-radius
不再适用。
Here's an example of the issue,可以在chrome和safari中看到
答案 0 :(得分:1)
看起来这是webkit中的一个错误,它会在chromium issue track上被跟踪。看起来没有任何修复的迹象很快就会被合并。
答案 1 :(得分:1)
好的,我已经尝试了一些你的例子。 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);
}
答案 2 :(得分:1)
在Chrome问题的@Rob链接跟踪中,user viktorli还添加了一种解决方法。
只需在不遵守transform
规则的流氓孩子的父元素上添加overflow:hidden
规则,它就会被修复!类似的东西:
-webkit-transform: scale(1);