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

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>

h1{
    -webkit-text-stroke: 1.0px #000000;
     color:pink
}

Der CSS3-Textstricheffekt ist wie folgt:

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:

Zusä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>

h1{text-shadow:2px 2px 0px blue;
color:pink;
}

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.

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

<h1>PHP中文网文字描边</h1>

rrree

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

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!