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
Artikel empfehlen
Implementierung von MySQL mit dem Befehl mysqlbinlog zum Wiederherstellen versehentlich gelöschter Daten
Experimentelle Umgebung: MySQL 5.7.22 Binäres Log...
Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)
1. Als ich heute eine Seite erstellte, stieß ich a...
js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren
Was ist Publizieren/Abonnieren? Lassen Sie mich I...
Eine kurze Diskussion über Yahoos 35 Regeln zur Front-End-Optimierung
Zusammenfassung: Ob bei der Arbeit oder im Vorste...
JavaScript zur Implementierung der Schaltfläche „Zurück nach oben“
In diesem Artikel wird der spezifische Code für J...
So verwenden Sie Navicat zum Bedienen von MySQL
Inhaltsverzeichnis Vorwort: 1. Einführung in Navi...
Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen
Heutzutage ist plattformübergreifende Entwicklung...
So stellen Sie einen Redis 6.x-Cluster über Docker bereit
Systemumgebung: Redis-Version: 6.0.8 Docker-Versi...
Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument
ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...
Detaillierte Erläuterung verschiedener Methoden der Vue-Komponentenkommunikation
Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...
Detaillierte Erklärung der Vue-Filter
<Text> <div id="Wurzel"> &l...
Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen
Microsoft IIS IIS (Internet Information Server) i...
Detaillierte Erklärung zum Anzeigen und Einstellen des SQL-Modus in MySQL
Anzeigen und Einstellen des SQL-Modus in MySQL My...
Navicat Premium betreibt MySQL-Datenbank (führt SQL-Anweisungen aus)
1. Einführung in Navicat 1. Was ist Navicat? Navi...
Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker
Inhaltsverzeichnis Tomcat mit Docker installieren...