suchen

Heim >Web-Frontend >CSS-Tutorial >CSS-Methode zum Implementieren von Textschatten (Codebeispiel)

CSS-Methode zum Implementieren von Textschatten (Codebeispiel)

不言
不言Original
2018-11-12 09:59:153147Durchsuche

CSS kann viele Effekte erzielen, daher wird Ihnen in diesem Artikel der Code für die Verwendung von CSS zum Anzeigen von Textschatten vorgestellt. Das Attribut, das wir zum Implementieren von Textschatten in CSS verwenden, ist das Textschattenattribut unten.

Syntaxformat:

text-shadow: (Abstand in x-Richtung) (Abstand in y-Richtung) (Unschärfegröße) (Schattenfarbe); Kommas trennen mehrere Schatten: (Verwandte Empfehlungen:

CSS3 Online-Handbuch

) Textschatten: (Abstand in x-Richtung von Schatten 1) (Abstand in y-Richtung von Schatten 1) (Unschärfegröße von Schatten 1) (Schatten 1 Farbe), (Schatten 2 x Richtungsabstand) (Schatten 2 y Richtungsabstand) (Schatten 2 Unschärfe) (Schatten 2 Farbe),..., (Schatten nx Richtungsabstand) (Schatten ny Richtungsabstand) (Schatten n Unschärfegröße) (Farbe des Schattens n); , HTML-Datei.

TextShadow.css

 text-shadow: 2px 2px 1px #808080;

TextShadow.html

  text-shadow: 4px 6px 2px blue;

Ergebnisse anzeigen

Wenn ein Webbrowser die obige HTML-Datei anzeigt, wird sie wie gezeigt angezeigt unten Effekt.

Beispiel 2:

Erstellen Sie die folgenden CSS- und HTML-Dateien.

TextShadow.css

 text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;

TextShadow.html

p.ShadowText{    
text-shadow: 5px 5px 2px #808080;
}
CSS-Methode zum Implementieren von Textschatten (Codebeispiel)Ergebnisse anzeigen

Wenn ein Webbrowser die obige HTML-Datei anzeigt, wird sie wie gezeigt angezeigt unten Effekt

Beispiel 3: Bei der Anzeige mehrerer Schatten

Erstellen Sie die folgenden CSS- und HTML-Dateien.

TextShadow.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText">文字阴影效果</p>
    </body>
    </html>

TextShadow.html

p.ShadowText2 {
    font-size:18px;    
    font-weight:700;    
    text-shadow: 2px 2px 1px #E0E0E0;
}

Ergebnisse anzeigenCSS-Methode zum Implementieren von Textschatten (Codebeispiel)

Wenn ein Webbrowser die obige HTML-Datei anzeigt, wird sie wie gezeigt angezeigt unten Effekte

Beispiel 4: Mehr Schatten

Erstellen Sie die folgenden CSS- und HTML-Dateien.

TextShadow.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText2">文字阴影效果</p>
    </body>
    </html>

TextShadow.html

p.ShadowText3 {
    font-size: 24px;    
    font-weight: 700;    
    text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0;
}

Ergebnisse anzeigenCSS-Methode zum Implementieren von Textschatten (Codebeispiel)

Wenn ein Webbrowser die obige HTML-Datei anzeigt, wird sie wie gezeigt angezeigt unten Effekt.

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere spannende Inhalte zu CSS finden Sie in der Spalte

CSS3-Video-Tutorial

php Chinesische Website! ! !

Das obige ist der detaillierte Inhalt vonCSS-Methode zum Implementieren von Textschatten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Wie implementiert man den Chat-Blaseneffekt in CSS3? (Codebeispiel)Nächster Artikel：Wie implementiert man den Chat-Blaseneffekt in CSS3? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen