css 变换，chrome 中的锯齿状边缘

发布于08月01日

我一直在使用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？

示例如下:

锯齿边示例

css 变换，chrome 中的锯齿状边缘

推荐答案

Css相关问答推荐

如何使一组元素的行为像字符串一样？

使用背景滤镜时，伪元素出现在div之前

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗？

根据子索引计算变换 CSS 参数

设置初始大小并记住分配的最后大小

混合网格自动布局与固定的行列位置

弹性布局溢出时的换行符

我在 ins 标签中有一个 img 标签，更改 ins 格式覆盖图像的视图

如何使用 TailwindCSS 水平设置输入和按钮

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

循环一个 sass/scss 变量以生成 css 变量

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素？

如何使用 TailwindCSS 禁用环形阴影？

使用 CSS 剪辑/裁剪背景图像

仅针对直接子代而不是其他相同后代的 CSS Select 器

在 CSS 或 JavaScript 中反转图像的 colored颜色

如何在 iOS 上获取带有 CSS 溢出的滚动条

在移动网络上禁用捏zoom

使用 HTML data-attribute 设置 CSS background-image url