Zwei Möglichkeiten zur Implementierung von Textstrichen in CSS3 (Zusammenfassung)
|
Frage Vor kurzem bin ich auf die Anforderung gestoßen, den unten gezeigten Textstricheffekt zu erzielen.
Lösung 1 Ich dachte zuerst daran, zu prüfen, ob es in CSS3 ein Attribut gibt, mit dem dies erreicht werden kann, und dann fand ich text-stroke Diese Eigenschaft ist eine zusammengesetzte Eigenschaft, mit der die Textbreite und die Textstrichfarbe festgelegt werden können. Diese Eigenschaft ist sehr einfach zu verwenden: text-stroke:1px#f00; (1px ist die Textbreite, #ff ist die Textstrichfarbe) Ich dachte, die Kompatibilität dieser Eigenschaft würde meine leicht hochgezogenen Mundwinkel mit der Zeit stoppen, und dann verfestigte sich allmählich Aber überraschenderweise unterstützen die meisten Browser diese Eigenschaft inzwischen. Sie müssen nur das Präfix -webkit- hinzufügen.
Demo
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Textstrich-Textstrich</title>
<Stil>
.demo {
Farbe: Nebelrose;
Textausrichtung: zentriert;
Schriftfamilie: Verdana;
Schriftgröße: 30px;
Schriftstärke: fett;
}
.Schlaganfall {
-webkit-text-stroke: 1px grüngelb;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Demo">
<p>Kein Strich hinzugefügt</p>
<p class="stroke">Schriftstrich hinzugefügt</p>
</div>
</body>
</html>Lösung 2 (empfohlen) Ich habe zufällig eine Methode entdeckt, mit der man auch ohne das Textstrich-Attribut einen Textstrich erzielen kann - Textschatten Und die Textschatteneigenschaft ist kompatibler und muss nicht mit -webkit- beginnen
Demo
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Text-Schatten-Textstrich</title>
<Stil>
.demo {
Textausrichtung: zentriert;
Schriftfamilie: Verdana;
Schriftgröße: 30px;
Schriftstärke: fett;
Farbe: rot;
}
.Schlaganfall {
Textschatten: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Demo">
<p>Kein Strich hinzugefügt</p>
<p class="stroke">Schriftstrich hinzugefügt</p>
</div>
</body>
</html>CSS simulierter Textstricheffekt 2
P{
Textschatten:
-1px -1px 0 #4f4d57,
1px -1px 0 #4f4d57,
-1px 1px 0 #4f4d57,
1px 1px 0 #4f4d57,
0px 2px 2px rgba(0,0,0,0,6);
Schriftgröße: 15px;
Farbe: #f2f2f2;
Schriftfamilie: „Microsoft YaHei“;
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL
>>: Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu
Artikel empfehlen
In Webseiten eingebettetes Flash und Kompatibilitätsprobleme mit IE, FF und Maxthon
Nachdem ich viele Schwierigkeiten überwunden hatte...
Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design
Diese Sammlung zeigt eine Reihe herausragender und...
So implementieren Sie einen reibungslosen Neustart von Nginx
1. Hintergrund Während des Serverentwicklungsproz...
Einige Hinweise zu MySQL-Routineberechtigungen
1. Wenn der Benutzer über die Berechtigung zum Er...
So stellen Sie einen Code-Server mit Docker bereit
Ziehen Sie das Bild # Docker-Pull Codercom/Code-S...
Mysql-Lösung zur Verbesserung der Effizienz beim Kopieren großer Datentabellen
Vorwort Dieser Artikel stellt hauptsächlich den r...
Detaillierte Zusammenfassung der MySQL-SQL-Anweisungen zum Erstellen von Tabellen
MySQL-SQL-Anweisung zum Erstellen einer Tabelle A...
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306. A...
Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats
Im Allgemeinen wird während des Entwicklungsproze...
JavaScript zum Erreichen eines vollständigen oder umgekehrten Auswahleffekts im Formular
In diesem Artikel wird der spezifische JavaScript...
Erläuterung von JavaScript-Mikrotasks und Makrotasks
Vorwort: js ist eine Single-Thread-Sprache, daher...
So schreiben Sie eine Node.JS-Version eines Spiels
Inhaltsverzeichnis Überblick Build-Prozess Verwan...
Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten
Ich bin erst vor Kurzem in eine neue Firma einges...
React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).
Ich habe gerade angefangen, React für Projekte zu...
HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder
HTML5 und jQuery implementieren die Vorschau loka...