小编use*_*264的帖子

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

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

在铬和野生动物园,它呈现罚款.

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

这是简单的HTML:

<div class="container">

   <div class="corner">

   </div>

</div>
Run Code Online (Sandbox Code Playgroud)

这是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 …
Run Code Online (Sandbox Code Playgroud)

firefox antialiasing css3 css-transforms

5
推荐指数
1
解决办法
8164
查看次数

标签 统计

antialiasing ×1

css-transforms ×1

css3 ×1

firefox ×1