Question

我有一个旋转45度的div，上面有一个边框图像。

在chrome和safari中，它渲染得很好。

在firefox中，令人讨厌的抗锯齿线出现在旋转div的边缘周围，在它的边缘和边框图像之间。

这是简单的HTML：

<div class="container">

   <div class="corner">

   </div>

</div>

这是CSS：

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;

    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

这是一个JSFiddle。在firefox中查看它，看看我的意思：

http://jsfiddle.net/uAF2u/

我已经看到了在div周围添加1px透明轮廓的提示，如果它没有像这种情况那样的边框图像，这将有效。

之前有人遇到这种情况并知道如何对其进行排序吗？

Answer 1

添加translateZ似乎可以更准确地显示并解决问题：

-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);

updated fiddle

我在转换中添加了translate，因为firefox现在已经为10个版本添加了前缀。

Answer 2

我和Firefox和Safari有同样的问题。在sibbling div之间有一条细线。

尝试不同的组合：

border-radius: 2px 0 0 0;

或

border-radius: 0 1px 0 0;

有问题的元素。

这似乎主要在Firefox和Safari中使用。在Safari中，您还必须导致重叠的定位元素。

Answer 3

transform：rotate（0.0005deg）;

FireFox 34

这适合我。

Answer 4

我在Firefox中有一个非常类似的问题，其中转换div有一个很薄的边框轮廓，我通过给div一个透明边框来修复它。可能这可以帮助。

在firefox中使用边框图像旋转div上的消除锯齿

4 个答案: