禁用 html/css 边框上的子像素别名答案

【问题标题】：disable subpixel aliasing on html/css borders禁用 html/css 边框上的子像素别名
【发布时间】：2021-05-27 17:58:29
【问题描述】：

我正在使用 css transform:scale 来放大一些元素，现在边框，最初是 1px solid black，得到了一些子像素渲染 - “抗锯齿” - 因为它们现在是 1.4px 或其他东西。它的具体外观取决于浏览器，但在所有现代浏览器上都很模糊。

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

【问题讨论】：

浏览器特定的解决方案 - 例如带有供应商前缀的 css - 也受到欢迎
...如果您使用 CSS 规则来转换/缩放您的元素，为什么不直接在同一规则中调整边框？？？
我应该提到比例是动态的 - 使用 javascript 完成。我没有尝试使用相同的 javascript 调整边框宽度，例如边框宽度：0.71px 或其他东西 - 可能是一个解决方案。

【解决方案1】：

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

由于我在一个类似的用例（用js动态缩放），我决定实现原作者在cmets中建议的javascript解决方案：

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

但是，在升级的情况下，我建议 Math.floor() 避免过度“增肥”边界。

【讨论】：

【解决方案2】：

您可以使用以下 css 在 WebKit 上控制文本抗锯齿： -webkit-font-smoothing：抗锯齿；有时会通过以下方式强制 3d 加速： -webkit-transform: translate3d(0, 0, 0); 也有助于混叠（至少在我的经验中使用旋转时）。

【讨论】：

谢谢，没错，但我要求对非文本元素产生混叠效果——特别是边框。这些不受-webkit-font-smoothing 的影响，并且 translateZ 技巧没有效果......

【解决方案3】：

这很模糊，因为 72 dpi 的标准显示器无法呈现小数像素大小，我相信您理解。另外还有nothing within the spec会影响边框的渲染或锯齿。

像素宽度为 2 可能会给您带来更好的效果，但几乎所有东西都会变得模糊。

一些视网膜设备和显示器确实支持sub-pixel border widths，但在跨浏览器支持方面没有一致的解决方案。

在我自己的测试中，我发现从角落缩放时效果更好，而不是默认情况下从中心缩放。以及增加四分之一或一半的数量。

transform: scale(1.25);
transform-origin: left top;

【讨论】：

【解决方案4】：

设置perspective 属性似乎可以解决问题：

.subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}

【讨论】：