Viele Leute wissen nicht, wie man das Text-Stroke-Attribut von CSS verwendet, um den Text auf der Seite zu streichen. Tatsächlich ist es auch eine sehr einfache Sache, den Text zu streicheln das CSS-Text-Stroke-Attribut, um eine Textschattenseite zu erstellen? Fassen wir die Textshadow-Eigenschaften unten zusammen.
1: textshadow-Attribut:
Viele Leute verwenden Text-Stroke in CSS, um Text zu streichen Rand einer Textzeile.
2: Verwendung der Textstrich-Syntax:
Textstrich: Breitenwert Farbwert
Erklärung:
In Tatsächlich ist Textstrich eine konforme Syntax und besteht aus zwei Untereigenschaften: Breitenwert und Farbwert.
1. Text-Strich-Breite-Attribut-Erklärung: Legen Sie die Breite des Rahmens fest.
2. Text-Strich-Farbe-Attribut-Erklärung: Im Allgemeinen Legen Sie die Farbe des Rahmens fest
Drei: Verwendungsbeispiel des Textstrichattributs:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 text-stroke属性</title> <style type="text/css"> div { font-size:30px; font-weight:bold; } #div2 { text-stroke:1px red; -webkit-text-stroke:1px red; -moz-text-stroke:1px red; -o-text-stroke:1px red; } </style> </head> <body> <div id="div1">我没有被描边</div> <div id="div2">我被描边1像素的红色的边</div> </body> </html>
Der obige Code hat folgende Auswirkung:
Wenn Sie der Meinung sind, dass es in Beispielanwendungen nicht sehr häufig verwendet wird, wir es jedoch mit anderen Attributen verwenden können, verwenden wir es gerne mit color:transparent, zum Beispiel:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 text-stroke属性</title> <style type="text/css"> div { font-family:Verdana; font-size:50px; font-weight:bold; color:transparent; /*设置文字颜色为透明*/ text-stroke:2px red; -webkit-text-stroke:2px #45B823; -moz-text-stroke:2px #45B823; } </style> </head> <body> <div>php中文网</div> </body> </html>
Der Effekt ist wie in der Abbildung dargestellt:
Das Obige ist eine vollständige Einführung in die Verwendung des CSS-Textstrichattributs zum Erstellen von Textstrichen Wenn Sie mehr über CSS-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie verwende ich die CSS-Textstricheigenschaft, um einen Textstrich zu erstellen? (Quellcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!