CSS implementiert 0,5px-Zeilen, um Kompatibilitätsprobleme mit Mobilgeräten zu lösen (empfohlen)

【Inhalt】:

1. Verwenden Sie den Verlaufsstil des Hintergrundbilds

2. Sie können den Maßstab zum Zoomen verwenden

3. Grenzen für Pseudoelemente festlegen

Code-Schnipsel hier einfügen <!DOCTYPE html>
<html>
<Kopf>
 <meta charset="utf-8">
 <title>Implementierungsmethode für 0,5px-Linien</title>
 <style type="text/css">
 /*Standard 1px Rand*/
 .b1{
 Höhe: 40px;
 Rand: 1px durchgezogen #ff0000;
 }
 /*1. Sie können den Farbverlaufsstil => verwenden, um .5px zu erreichen*/
 .a1{
 Höhe: 1px;
 Rand oben: 20px;
 Hintergrundbild: linearer Farbverlauf (0 Grad, #f00 50 %, transparent 50 %);
 }
 /*2. Sie können Zoom-Blur => verwenden, um 0,5 Pixel zu erreichen*/
 .a2{
 Höhe: 1px;
 Rand oben: 20px;
 Hintergrundfarbe: #f00;
 -webkit-transform: MaßstabY(.5);
 transformieren:SkalaY(.5);
 }
 /*3. Für alle vier Ränder erforderliche Stile*/
 .scale-half {
 Rand oben: 20px;
 Höhe: 100px;
 Rand: 1px durchgezogen #f00;
 -webkit-transform-origin: 0 0;
 Transform-Ursprung: 0 0;
 -webkit-transform: Skalierung(.5, .5);
 transformieren: Skalierung(.5, .5);
 }
 /*4. Pseudoelementen Ränder hinzufügen*/
 .border3{
 Position: relativ;
 }
 .border3:vor{
 Inhalt: '';
 Position: absolut;
 Breite: 200 %;
 Höhe: 200%;
 Rand: 1px durchgehend blau;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-Transform-Origin: 0 0;
 Transform-Ursprung: 0 0;
 -webkit-transform: Skalierung(.5, .5);
 -ms-transform:Skala(.5, .5);
 -o-transform: Skalierung(.5, .5);
 transformieren: Skalierung(.5, .5);
 -webkit-box-sizing: Rahmenbox;
 -moz-box-sizing: Rahmenbox;
 Box-Größe: Rahmenbox;
 }
 </Stil>
</Kopf>
<Text>
<div class="b1">Normaler 1px-Rahmen</div>
<div Klasse="a1"></div>
<div Klasse="a2"></div>
<div Klasse="scale-half"></div>
<div Klasse="border3">
 <div class="content">Rahmen durch Pseudoklasse gesetzt</div>
</div>
</body>
</html>

Dies ist das Ende dieses Artikels über die Verwendung von CSS zur Implementierung von 0,5px-Linien zur Lösung von Kompatibilitätsproblemen auf Mobilgeräten (empfohlen). Weitere relevante Inhalte zur Verwendung von CSS zur Implementierung von 0,5px-Linien finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten aufgeführten verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Zusammenfassung der Vue Watch-Überwachungsmethoden

>>: Detaillierte Erklärung, ob die MySQL-Datenbank Fremdschlüsseleinschränkungen verwenden soll