我一直在使用 CSS3 变换来旋转我网站中带边框的图像和文本框。
问题是边框在 Chrome 中看起来是锯齿状的,就像一个没有抗锯齿的(低分辨率)游戏。在 IE、Opera 和 FF 中,它看起来好多了,因为使用了 AA(仍然清晰可见,但还不错)。我无法测试 Safari,因为我没有 Mac。
旋转的照片和文字本身看起来很好,只是边框看起来有锯齿。
我使用的 CSS 是这样的:
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
有什么办法可以解决这个问题,例如通过强制 Chrome 使用 AA?
示例如下:
最佳答案
万一以后有人搜索这个,在 Chrome 中摆脱 CSS 转换中那些锯齿状边缘的一个好技巧是添加值为 -webkit-backface-visibility
的 CSS 属性隐藏
。在我自己的测试中,这已经完全消除了它们。
-webkit-backface-visibility: hidden;
关于google-chrome - css 变换,chrome 中的锯齿状边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6492027/