禁用html/css邊框上的子像素別名

我使用css transform:scale來縮放一些元素，現在原本爲1px solid black的邊框得到了一些子像素渲染 - 「反鋸齒」 - 因爲它們現在是1.4px或其他東西。究竟它的外觀取決於瀏覽器，但它在所有現代瀏覽器上都很模糊。禁用html/css邊框上的子像素別名

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

2013-04-14 commonpike

特定瀏覽器的解決方案 - 如CSS與供應商前綴 - 也歡迎 – commonpike

...如果你使用一個CSS規則來變換/擴展您的元素，你爲什麼不只是調整的邊界在此同一規則??? – Cholesterol

我應該提到規模是動態的 - 用JavaScript完成。我沒有嘗試使用相同的javascript調整邊框寬度，例如border-width：0.71px或其他 - 可能是解決方案。 – commonpike

你可以用這個CSS控制WebKit上的文本反鋸齒： -webkit-font-smoothing：antialiased; 有時迫使3D加速的東西，如： -webkit-變換：translate3d（0，0，0）; 也有助於消除鋸齒（至少在我的經驗中使用旋轉時）。

2013-09-26 21:51:56

謝謝，並且正確，但是我要求對非文本元素（特別是邊框）產生鋸齒效果。這些不受'-webkit-font-smoothing'的影響，而translateZ技巧沒有效果...... – commonpike

因爲72 dpi的標準顯示器無法呈現分數像素大小，因爲我相信你瞭解這一點很模糊。另外，有nothing within the spec會影響邊界的渲染或別名。

的2像素寬度可能會給你更好的結果，但只是一切將變得模糊。

一些視網膜設備和顯示器做支撐sub-pixel border widths但目前還沒有一致的解決方案，當涉及到跨瀏覽器支持。

在我自己的測試，我發現更好的結果從一個角落裏縮放時，而不是在默認情況下，以中心。以及增加四分之一或一半的金額。

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

2017-01-30 19:09:26

回答