Firefox中带有边框图像的旋转div上的抗锯齿
Posted
技术标签:
【中文标题】Firefox中带有边框图像的旋转div上的抗锯齿【英文标题】:Anti-aliasing on rotated div with border image in firefox 【发布时间】:2013-12-22 18:26:58 【问题描述】:我有一个旋转 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 透明轮廓的提示,如果它没有像这种情况下的边框图像,这将起作用。
有人遇到过这种情况并知道如何对其进行排序吗?
【问题讨论】:
见***.com/questions/9235342/… 【参考方案1】:添加 translateZ 似乎可以更快地显示更准确并解决问题:
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);
updated fiddle
我在转换中添加了翻译,因为 firefox 现在已经有 10 个版本没有前缀了。
【讨论】:
【参考方案2】:变换:旋转(0.0005deg);
火狐 34
这对我有用。
【讨论】:
【参考方案3】:我在 Firefox 中遇到了一个非常相似的问题,其中转换的 div 的边框轮廓很薄,我通过给 div 一个透明的边框来修复它。 这可能会有所帮助。
【讨论】:
【参考方案4】:我对 Firefox 和 Safari 也有同样的问题。兄弟 div 之间有 1 条细线。
尝试不同的组合:
border-radius: 2px 0 0 0;
或
border-radius: 0 1px 0 0;
关于有问题的元素。
这似乎主要在 Firefox 和 Safari 中起作用。 在 Safari 中,您还必须导致重叠的定位元素。
【讨论】:
以上是关于Firefox中带有边框图像的旋转div上的抗锯齿的主要内容,如果未能解决你的问题,请参考以下文章