Używam css transform:scale, aby przeskalować niektóre elementy, a teraz granice, które pierwotnie były 1px solid black, uzyskały renderowanie subpikseli - "wygładzanie" - ponieważ są teraz 1.4px lub coś podobnego. Dokładnie to, jak wygląda, zależy od przeglądarki, ale jest niewyraźne we wszystkich nowoczesnych przeglądarkach.Wyłącz aliasing podpikseli na html/css granice
Czy mogę wyłączyć renderowanie subpikseli dla niektórych elementów?
Możesz kontrolować wygładzanie tekstu na WebKit za pomocą tego css: -webkit-wygładzanie czcionek: antyaliasing; I czasami wymuszając przyspieszenie 3d z czymś podobnym: -webkit-transform: translate3d (0, 0, 0); pomaga również wygładzanie (przynajmniej podczas korzystania z obrotu w moim doświadczeniu).
Dziękuję i słusznie, ale prosiłem o efekt aliasingu na elementy nietekstowe - w szczególności granice. nie wpływają one na "-webkit-font-smoothing", a sztuczka translateZ nie miała żadnego efektu ... – commonpike
Jest niewyraźny, ponieważ standardowe wyświetlacze o rozdzielczości 72 dpi nie mogą renderować ułamkowych rozmiarów pikseli, co na pewno rozumiesz. Ponadto istnieje nothing within the spec, który wpływa na renderowanie lub aliasing granic.
Szerokość 2 pikseli może dać lepsze wyniki, ale prawie wszystko się zamazuje.
Niektóre urządzenia i ekrany Retina obsługują sub-pixel border widths, ale nie ma spójnych rozwiązań, jeśli chodzi o obsługę wielu przeglądarek.
W moich własnych testach, znalazłem lepsze wyniki przy skalowaniu z narożnika, w przeciwieństwie do centrum domyślnie. Jak również przyspieszenie w kwartał lub pół kwoty.
transform: scale(1.25);
transform-origin: left top;
rozwiązania przeglądarkowe specyficzne - np css z prefiksów dostawców - są mile widziane zbyt – commonpike
... jeśli używasz regułę CSS przekształcić/skalowanie elementów, dlaczego nie można po prostu ustawić granice w tej samej regule ??? – Cholesterol
Powinienem wspomnieć, że skala była dynamiczna - zrobiona z javascript. Nie próbowałem dopasować szerokości ramki z tym samym javascript, np. Border-width: 0.71px lub coś takiego - mogło być rozwiązaniem. – commonpike