我一直在使用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转换上的锯齿状边缘的一个好技巧是添加CSS属性-webkit-backface-visibility，值为hidden。在我自己的测试中，这完全消除了它们。
-webkit-backface-visibility: hidden;
其他回答
尝试3d变换。这招真是妙不可言!
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
为了防止以后有人搜索这个，在Chrome中消除CSS转换上的锯齿状边缘的一个好技巧是添加CSS属性-webkit-backface-visibility，值为hidden。在我自己的测试中，这完全消除了它们。
-webkit-backface-visibility: hidden;
Chrome canvas (Version 52)
所有列出的答案都是关于图像的。但我的问题是关于画布在chrome(第52节)与变换旋转。它们变得参差不齐，所有这些方法都无济于事。
适合我的解决方案:
使画布大1像素为每边=> +2像素的宽度和高度; 用偏移量+ 1px绘制图像(在位置1,1而不是0,0)和固定大小(图像的大小应该比画布的大小小2px) 应用所需的旋转
所以重要的代码块: //不固定的版本 ctx。drawImage(img, 0, 0, 335, 218); //固定版本 ctx。drawImage(img, 1,1,335, 218); /*此样式应用于固定版本*/ 帆布{ margin-left: 1 px; margin-top: 1 px; ｝ <！不固定的版本——> <canvas width="335" height="218"></canvas> <！——固定版本——> <canvas width="337" height="220"></canvas>
示例:https://jsfiddle.net/tLbxgusx/1/
注意:有很多嵌套的div，因为它是从我的项目简化版本。
这个问题也为我的Firefox复制。 在Safari和FF上不存在这样的问题。
和其他成立的解决方案是将画布放入相同大小的div，并应用以下css到这个div:
overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;
和旋转应该适用于这个包装div。所以列出的解决方案是工作，但与小的修改。
该方案的修改示例为:https://jsfiddle.net/tLbxgusx/2/
注意:参见带有类'third'的div样式。
你可以使用模糊的盒子阴影来掩盖锯齿。使用-webkit-box-shadow代替box-shadow将确保它不会影响非webkit浏览器。不过，你可能想检查一下Safari和移动webkit浏览器。
结果稍微好一些，但仍然比其他浏览器差很多:
对我来说，透视CSS属性起了作用:
-webkit-perspective: 1000;
完全不合逻辑的在我的情况下，因为我没有使用3d过渡，但仍然工作。
