禁用 html/css 边框上的子像素混叠 [英] disable subpixel aliasing on html/css borders

问题描述

我正在使用 css transform:scale 来放大一些元素，现在边框，原来是 1px 纯黑色，得到一些子像素渲染 - '抗锯齿' - 因为它们现在是 1.4px 什么的.它的确切外观取决于浏览器，但在所有现代浏览器上都是模糊的.

I'm using css transform:scale to scale some elements up, and now the borders, which were originally 1px solid black, get some subpixel rendering - 'antialiasing' - since they are now 1.4px or something. Exactly how it looks depends on the browser, but its blurry on all modern browsers.

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

Can I disable subpixel rendering for certain elements?

推荐答案

在使用 transform: scale(ratio) 进行缩小时遇到了类似的问题，除了边框会在子像素渲染时完全消失而不是模糊.

Ran into a similar issue with downscaling using transform: scale(ratio), except the borders would entirely dissapear on subpixel rendering instead of blurring.

由于我在类似的用例中(使用js动态缩放)，我决定实现原作者评论中建议的javascript解决方案:

Since I was in a similar use case (dynamic scaling with js), I decided to implement the javascript solution suggested in the comments by the original author:

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

然而，在升级的情况下，我会建议 Math.floor() 以避免过多地增肥"边界.

In an upscaling situation I would however suggest Math.floor() to avoid 'fattening' the borders too much.

这篇关于禁用 html/css 边框上的子像素混叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！