Detaillierte Einführung in Ebenenschatten- und Textschatteneffekte mit CSS3

Box-Shadow-Ebenenschatten

Box-Shadow: Schattentyp X horizontaler Versatz (kann positive und negative Werte annehmen) Y vertikaler Versatz ( (kann positive und negative Werte annehmen) Schattengröße Erweiterter Schattenfarbwert
Der Schattentyp kann weggelassen werden. Der Standardwert ist „äußerer Schatten“.
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.

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

Rendering:

<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;   
}

Ändern Sie den Box-Shadow-Projektionstyp in Einschub, Rendering:

Beispiel 2:

Rendering:

<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;   
}

text-shadow text-shadow

Oben haben wir über die CSS3-Ebene Shadow Box-Shadow gesprochen Erzielen Sie den Ebenenschatteneffekt. Heute lernen wir gemeinsam, wie man Text implementiert. Der Schatteneffekt verwendet ein weiteres Attribut von CSS3, Textschatten. Diese beiden Effekte verbessern die Textur der Ebene bzw. des Textes und erzeugen einen dreidimensionalen Effekt.

Syntax:

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

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

Beschreibung:

ähnelt dem Ebenenschatten, es kann auch ein oder angewendet werden mehrere Gruppen zum gleichen Objekt Schatteneffekte, 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, erfolgt ein Versatz nach unten, und wenn er negativ ist, erfolgt ein Versatz nach oben. Der Farbwert des Schattens kann #xxx, rgb oder rgba transparent sein.

Beispiel: Textschatten

Der Anzeigeeffekt ist wie folgt:

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

Vergleiche Box-Shadow

Der Effekt ist wie folgt:

<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 Anzeigeeffekt ist wie folgt :

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Ebenenschatten- und Textschatteneffekte mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!