Wie füge ich einen Textschatteneffekt in CSS3 hinzu? text-shadow legt den Textschatteneffekt fest

Der Schatteneffekt ist ein häufiger und sehr praktischer Effekt. Ich glaube, dass einige Freunde manchmal Fragen haben, wenn sie Schatteneffekte verwenden, um Webseiten schön zu gestalten, z. B. wie man den Schatten von Schriftarten und Text usw. einstellt. In diesem Kapitel erfahren Sie, wie Sie den Textschatten der Schriftart in CSS3 festlegen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Tatsächlich gibt es in CSS3 ein sehr praktisches Attribut, das dem Schrifttext einen Schatteneffekt hinzufügen kann, nämlich das css3 text-shadow attribute.

Also werfen wir zunächst einen detaillierten Blick auf das Text-Shadow-Attribut:

Text-Shadow ist ein CSS-Stilattributwort, mit dem festgelegt wird, ob die Textschriftart im Objekt vorhanden ist ein Schatten- und Unschärfeeffekt.

text-shadow-Attribut: In CSS3 können Sie das text-shadow-Attribut verwenden, um dem Text auf der Seite einen Schatteneffekt hinzuzufügen. Sie können einige erforderliche Schriftschatteneffekte erzielen, indem Sie relevante Attributwerte festlegen ​zum Text-Shadow-Attribut ,Reduzieren Sie die Verwendung von Bildern.

Die Syntax des Textschattenattributs:

text-shadow: h-shadow v-shadow blur color;

Es ist ersichtlich, dass das Textschattenattribut 4 Parameter festlegen kann. Jeder Parameter ist durch Leerzeichen getrennt. :

h-shadow: Legen Sie die Position des horizontalen Schattens (Richtung der x-Achse) fest. Negative Werte sind zulässig.
V-Schatten: Legen Sie die Position des vertikalen Schattens (Richtung der y-Achse) fest, erforderliche Parameter, negative Werte sind zulässig.
Unschärfe: Der Abstand (Radiusgröße) der Schattenunschärfe. Sie können die Parameter festlegen.
Farbe: Die Farbe des Schattens, optionale Parameter zum Festlegen.

Hinweis: Das text-shadow-Attribut kann dem Text einen oder mehrere Schatten hinzufügen. Bei dieser Eigenschaft handelt es sich um eine durch Kommas getrennte Liste von Farbtönen, wobei jeder Farbton mit zwei oder drei Längenwerten und einem optionalen Farbwert angegeben wird. Die weggelassene Länge ist 0.

Sehen wir uns ein kleines Beispiel für die css3-Einstellung des Schrifttextschattens an, um ein konkretes Verständnis der Verwendung des Textschattenattributs zu erhalten:

<h1>我是一段测试文字</h1>

h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

Rendering:

Sehen wir uns an, was passiert, wenn der CSS3-Textschatteneffekt nicht eingestellt ist:

Beschreibung:

1. Der horizontale Versatz des Schattens (h-Schatten): Er kann einen positiven oder einen negativen Wert annehmen. Wenn der Wert positiv ist, befindet sich der Schatten auf der rechten Seite Seite des Objekts und umgekehrt. Wenn der Wert negativ ist, befindet sich der Schatten links vom Objekt.

2. Der vertikale Versatz des Schattens (V-Schatten): Er kann einen positiven oder einen negativen Wert annehmen. Andernfalls befindet sich der Schatten am unteren Rand des Objekts. wenn der Wert negativ ist, der Schatten über dem Objekt.

3. Schattenunschärferadius: kann nur auf positive Werte eingestellt werden. Wenn der Wert größer ist, wird der Schatten unscharf, andernfalls wird der Schatten klarer. Wenn der Wert 0 ist, bedeutet dies, dass der Schatten keinen Unschärfeeffekt hat.

4. Schattenfarbe: Wenn kein Farbwert angegeben ist, verwendet der Browser die Standardfarbe, aber die Standardfarbe jedes Browsers ist unterschiedlich, insbesondere Safari- und Chrome-Browser unter dem Webkit-Kernel verwenden keine Farbe Da es sich um Transparenz handelt, wird empfohlen, diesen Parameter nicht wegzulassen.

Apropos verschiedene Standardfarben von Browsern: Schauen wir mal, ob das text-shadow-Attribut in jedem Browser unterstützt wird:

Browser-Unterstützung:

Alle gängigen Browser unterstützen das Text-Shadow-Attribut.

Hinweis: Internet Explorer 9 und frühere Browser unterstützen das text-shadow-Attribut nicht.

Das obige ist der detaillierte Inhalt vonWie füge ich einen Textschatteneffekt in CSS3 hinzu? text-shadow legt den Textschatteneffekt fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!