在html/css边框上禁用子像素别名

Question

我正在使用css transform:scale来扩展一些元素,现在最初的边界1px solid black得到了一些子像素渲染 - "抗锯齿" - 因为它们现在1.4px或者什么东西.它的外观究竟取决于浏览器,但它在所有现代浏览器上都很模糊.

我可以禁用某些元素的子像素渲染吗？

Answer 1

使用 缩小尺寸时遇到了类似的问题transform: scale(ratio)，只不过边框在子像素渲染上会完全消失而不是模糊。

由于我处于类似的用例（使用js动态缩放），因此我决定实现原作者评论中建议的javascript解决方案：

container.style.transform = "scale(" + ratio + ")";
elementWithBorder.style.border = Math.ceil(1 / ratio) + "px solid lightgray";

然而，在升级的情况下，我建议使用 Math.floor() 来避免边界“过于肥大”。