Heim > Web-Frontend > CSS-Tutorial > Wie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche

Wie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche

不言
Freigeben: 2020-01-16 09:47:30
Original
17842 Leute haben es durchsucht

Manchmal werden auf Webseiten Textkonturen mit Rändern gezeichnet. In der Vergangenheit mussten Sie möglicherweise Tools wie PS verwenden, um Text zu umreißen. Die Umrisse des Textes können direkt ohne die Hilfe anderer Tools umgesetzt werden. Daher werde ich Ihnen in diesem Artikel zeigen, wie Sie Schriftstriche in CSS3 implementieren.

Empfohlenes Handbuch: CSS-Online-Handbuch

Werfen wir zunächst einen Blick auf das Text-Stroke-Attribut des CSS3-Textstrichs.

Hinweis: Das Textstrich-Attribut wird nur von Safari und Chrome mit Webkit-Kern unterstützt.

Syntax: Text-Stroke-Breite '>' Text-Stroke-Farbe '>


: Legen Sie die Strichstärke des Textes im Objekt fest oder rufen Sie sie ab.

: Legen Sie fest oder rufen Sie sie ab Strichstärke des Textes im Objekt Die Strichfarbe des Textes

Schauen wir uns direkt ein Beispiel an:

<h1>PHP中文网文字描边</h1>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
h1{
    -webkit-text-stroke: 1.0px #000000;
     color:pink
}
Nach dem Login kopieren

Der CSS3-Textstricheffekt ist wie folgt:

Wie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche

Es ist zu beachten, dass:

Das Text-Stroke-Attribut kann nur den Strich sehen Effekt, wenn die Schriftart relativ klein ist, deckt die Strichfarbe den Text selbst ab, wie in der Abbildung gezeigt:

Wie streiche ich CSS3-Text? So implementieren Sie CSS3-SchriftstricheZusätzlich zu den oben genannten

Verwenden Sie das Attribut text-shadow, um einen Textstrich zu erzielen.

Tatsächlich können Sie auch das Attribut text-shadow verwenden, um Text zu streichen. Der spezifische Inhalt des Attributs text-shadow ist, wie wir den Textschatten festlegen in css3? Die Methode zum Festlegen von Textschatten mithilfe von Textschatten in CSS3 wurde bereits vorgestellt, daher werde ich hier nicht auf Details eingehen. Schauen wir uns also direkt das Beispiel des Textschattenattributs zum Implementieren von Schriftstrichen an:

<h1>PHP中文网文字描边</h1>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
h1{text-shadow:2px 2px 0px blue;
color:pink;
}
Nach dem Login kopieren
Der CSS3-Textstricheffekt ist wie folgt:

Hinweis: Wenn Sie das Gefühl haben, dass der Textstrich nicht dick genug ist , können Sie mehrere Schriftschatten verwenden, so dass Sie dickere Textstriche erzielen können. Wie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche

Der Strichcode für dickeren CSS3-Text lautet wie folgt:

<h1>PHP中文网文字描边</h1>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
rrree

Der Stricheffekt für CSS3-Text lautet wie folgt:

Wie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche
Empfohlene verwandte Artikel:

1.Wie verwende ich das CSS-Textstrichattribut, um Textstriche zu erstellen? (Quellcode)
2.Wie füge ich in CSS3 Striche zum Text hinzu? Methode zum Implementieren des Schriftstrichstils in CSS3 (detaillierte Codeerklärung)
Verwandte Videoempfehlungen:
1.CSS-Video-Tutorial – Jade Girl Heart Sutra Edition
Das Obige ist der gesamte Inhalt dieses Artikels. Den spezifischen Inhalt der im Artikel erwähnten Eigenschaften in CSS3 finden Sie im CSS3-Benutzerhandbuch
.

Das obige ist der detaillierte Inhalt vonWie streiche ich CSS3-Text? So implementieren Sie CSS3-Schriftstriche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage