Die Verwendung von CSS3-Ebenenschatten und Textschatten

Dieser Artikel stellt hauptsächlich die Verwendung von CSS3-Ebenenschatten und Textschatten vor. Jetzt kann ich ihn mit Ihnen teilen.

Box-Shadow-Ebene Das Schattenattribut und das Textschattenattribut text-shadow sind in der Verwendung ähnlich. Sie verwenden beide das X-Achsen- und das Y-Achsen-Koordinatensystem, um die Schattenausdehnung zu steuern. Hier erklären wir detailliert die Verwendung von CSS3-Ebenenschatten- und Textschatteneffekten:

Box-Shadow-Ebenenschatten

Box-Shadow: Schattentyp X horizontaler Versatz (kann positive und negative Werte annehmen) Y vertikaler Versatz (kann Nehmen Sie positive und negative Werte an) Schattengröße Erweiterter Schattenfarbwert
Der Schattentyp kann weggelassen werden und der Standardwert ist äußerer Schatten. Wenn der Wert eingefügt ist, handelt es sich um einen inneren Schatteneffekt.
Der horizontale X-Versatz und der vertikale Y-Versatz können positive und negative Werte annehmen. Wenn X negativ ist, wird es nach links projiziert, und wenn es positiv ist, wird es nach rechts projiziert. Wenn Y negativ ist, wird es nach oben projiziert, wenn es positiv ist, wird es nach unten projiziert.
Die Schattengrößen- und Erweiterungsprinzipien sind die gleichen wie in PS.

Browser-Kompatibilität:
Verschiedene Browser haben unterschiedliche Kompatibilität. Der Mozilla-Kernel-Browser ist wie folgt geschrieben (neue Versionen von Firefox müssen jedoch nicht mehr hinzugefügt werden):
- moz-box-shadow: Schattentyp
-webkit-box-shadow: Schattentyp:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:3px 3px 3px 3px #000;   
 /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}

Rendering:

Ändern Sie die Box-Shadow-Projektionstyp zum Einsetzen, Rendering:

Beispiel 2:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
 /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}

Rendering:

Textschatten Textschatten

Oben haben wir über CSS3-Ebenenschattenbox-Schatten gesprochen, um den Effekt von Ebenenschatten zu erzielen Wie man zusammen den Textschatteneffekt erzielt, verwenden wir zusätzlich CSS3. Diese beiden Effekte verstärken die Textur der Ebene bzw. des Textes und erzeugen einen dreidimensionalen Effekt.

Syntax:

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

text-shadow: Verschiebung auf der X-Achse (sowohl positiv als auch negativ), Verschiebung auf der Y-Achse (sowohl positiv als auch negativ) , Schatten Die Breite und der Farbwert des Schattens

Beschreibung:

ähnelt dem Ebenenschatten. Es können auch ein oder mehrere Sätze von Schatteneffekten auf dasselbe Objekt angewendet werden , durch Kommas getrennt. Der X-Achsenversatz kann positiv oder negativ sein. Wenn X positiv ist, wird er nach rechts versetzt, und wenn er negativ ist, wird er nach links versetzt. Der Y-Achsenversatz kann positiv oder negativ sein. Wenn X positiv ist, wird er nach unten versetzt, und wenn er negativ ist, wird er nach oben versetzt. Der Farbwert des Schattens kann #xxx, rgb oder rgba transparent sein.

Beispiel: text-shadow

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>

Der Anzeigeeffekt ist wie folgt:

Vergleiche box-shadow

<h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>

Der Effekt ist wie folgt:

Der Anzeigeeffekt ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass das Lernen für alle hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:

Analyse zum Unterschied zwischen der Verwendung von RGBA und Opazität zum Festlegen der Transparenz in CSS

Verwendung CSS3 zum Erreichen mehrerer Elemente werden nacheinander angezeigt

So verwenden Sie CSS, um das Hintergrundbild zu strecken und zu füllen, um eine wiederholte Anzeige zu vermeiden

Das obige ist der detaillierte Inhalt vonDie Verwendung von CSS3-Ebenenschatten und Textschatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!