html - 禁用 html/css 边框上的亚像素别名

Question

我正在使用 css transform:scale 来放大一些元素，现在边框，原来是 1px solid black，得到一些子像素渲染 - 'antialiasing ' - 因为它们现在是 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() 避免过度“增肥”边界。