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:

<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:

<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.

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

Beispiel: Textschatten

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

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 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!