css变换锯齿状边缘解决办法

css变换锯齿状边缘解决办法

Arthur
2021-12-27 / 1 评论 / 121 阅读 / 正在检测是否收录...

Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样。
旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框。

下面是一些常用的解决办法

  • 如果有人在以后搜索这个,那么摆脱Chrome中CSS转换的锯齿状边缘的一个好方法是添加CSS属性-webkit-backface-visibility,其值为hidden。在我自己的测试中,这已经完全平滑了它们。 希望有所帮助。

    -webkit-backface-visibility: hidden;
  • 如果您使用的是outline: 1px solid transparent;而不是transform,-webkit-backface-visibility: hidden;不起作用。 在动画期间,透明png文件会出现锯齿状边缘。

  • 为了解决这个问题,我使用添加1px透明边框将触发抗锯齿

    outline: 1px solid transparent;
  • 尝试3d变换.

    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateZ(2deg);
  • 添加1px透明边框将触发抗锯齿或者或者添加1px透明框阴影

    outline: 1px solid transparent;
    box-shadow: 0 0 1px rgba(255,255,255,0);
  • 使用-webkit-backface-visibility: initial; 代替-webkit-backface-visibility: hidden;

  • 添加转换触发抗锯齿

    -webkit-transform-style: preserve-3d;
  • 添加透视

    -webkit-perspective: 1000;
0
如果你觉得文章还不错,可以请我喝杯咖啡啊哈哈哈
wechat alipay

评论 (1)

取消
  1. 头像
    wa-monster
    Windows 10 · Google Chrome

    画图

    回复