Wie erreiche ich einen CSS3-Textschatteneffekt? [Detaillierte Code-Erklärung]-CSS-Tutorial-php.cn

Wie erreiche ich einen CSS3-Textschatteneffekt? [Detaillierte Code-Erklärung]

藏色散人

Freigeben： 2018-09-05 13:49:09

Original

2705 Leute haben es durchsucht

Das Wort „Textschatten“ mag für CSS-Neulinge etwas ungewohnt klingen, also sagen wir es anders: Text mit einem dreidimensionalen Gefühl. Kommen Ihnen manche Bilder sofort in den Sinn? Wenn Sie meinen vorherigen Artikel [Ausführliche Erklärung zum Erstellen von Schatteneffekten in CSS3] gelesen haben, sollten Sie den Div-Schatteneffekt einigermaßen verstehen. Dieses Hauptattribut ist das Box-Shadow-Stilattribut.

Dann wird Ihnen dieser Artikel weiterhin vorstellen, wie Sie Textschatteneffekte in CSS3 erstellen, also wie Sie 3D-Schriftarten erstellen. Die Hauptattribute, die hier beherrscht werden müssen, sind die Text-. Schattenstilattribute, einige Neulinge fragen sich vielleicht, was Textschatten ist? Was ist die Bedeutung? Wie benutzt man? Machen Sie sich keine Sorgen, wir werden es unten anhand eines spezifischen Beispielcodes ausführlich erklären.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3 text-shadow属性使用示例</title>
    <style>
      .t1{
          text-shadow: 5px 5px 5px #029789;
          font-size: 40px;
          font-weight: bold;
          color: white;
      }
      .t2{
          text-shadow: -5px -5px 5px #1094f2;
          font-size: 40px;
          font-weight: bold;
     color: white;
      }
    </style>
</head>
<body>
<div class="demo">
    <p class="t1">text-shadow属性使用示例1-文字阴影效果</p>
    <p class="t2">text-shadow属性使用示例2-文字阴影效果</p>
</div>
</body>
</html>

Nach dem Login kopieren

Wir greifen über den Browser auf den obigen Code zu und der Effekt ist wie folgt:

Wie erreiche ich einen CSS3-Textschatteneffekt? [Detaillierte Code-Erklärung]

Sieht es so aus, als hätte die Schriftart eine Drei? -dimensionaler Effekt? Sind Ihnen die Unterschiede zwischen Beispiel 1 und Beispiel 2 aufgefallen? Tatsächlich ist es offensichtlich, dass sich der Schattenteil des Textes in Beispiel 1 unten rechts im Text befindet! Und der Schriftschatten in Beispiel 2 befindet sich oben links im Text!

Diese Effekte sind alle auf das Text-Shadow-Stilattribut in CSS3 zurückzuführen! Wir können feststellen, dass die Werte von text-shadow in Beispiel 1 5px 5px 5px #029789 sind; die Werte in Beispiel 2 sind -5px -5px 5px #1094f2; -Achsenrichtung, Y-Achsenversatz, Unschärfewert, Schattenfarbe. Dann ist der Unterschied in der Schattenposition auf die positiven und negativen Werte der ersten beiden Werte zurückzuführen.

Ein positiver Wert auf der x-Achse zeigt eine Verschiebung nach rechts an, ein negativer Wert zeigt eine Verschiebung nach links an, ein positiver Wert auf der y-Achse zeigt eine Verschiebung nach unten an und ein negativer Wert zeigt eine Verschiebung an Je größer der Unschärfewert, desto größer die Unschärfe.

Sobald Sie die Bedeutung dieser Werte verstanden haben, können Sie den Textschatteneffekt frei nach Ihren eigenen Vorlieben ändern.

Das Obige ist eine detaillierte Einführung in die Verwendung des CSS-Textschattenattributs, d. h. eine detaillierte Einführung in die Art und Weise, wie der Schriftart ein 3D-Effekt verliehen wird. Es hat einen gewissen Referenzwert und ich hoffe, dass es Freunden in Not hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen CSS3-Textschatteneffekt? [Detaillierte Code-Erklärung]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!