CSS-Methode zum Implementieren von Textschatten (Codebeispiel)-CSS-Tutorial-php.cn

CSS-Methode zum Implementieren von Textschatten (Codebeispiel)

不言

Freigeben： 2018-11-12 09:59:15

Original

3115 Leute haben es durchsucht

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;

Nach dem Login kopieren

TextShadow.html

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

TextShadow.html

p.ShadowText{    
text-shadow: 5px 5px 2px #808080;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

TextShadow.html

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

Nach dem Login kopieren

Ergebnisse anzeigen CSS-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>

Nach dem Login kopieren

TextShadow.html

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

Nach dem Login kopieren

Ergebnisse anzeigen CSS-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!