Introduction détaillée aux effets d'ombre de calque et d'ombre de texte à l'aide de CSS3

ombre du calque box-shadow

box-shadow : Type d'ombre Décalage horizontal X (peut prendre des valeurs positives et négatives) Décalage vertical Y ( peut prendre des valeurs positives et négatives) Taille de l'ombre Valeur de couleur de l'ombre étendue
Le type d'ombre peut être omis. La valeur par défaut est l'ombre extérieure. Lorsque sa valeur est incrustée, il s'agit d'un effet d'ombre intérieure.
Le décalage horizontal X et le décalage vertical Y peuvent prendre des valeurs positives et négatives. Lorsque X est négatif, il est projeté à gauche, et lorsqu'il est positif, il est projeté à droite. Lorsque Y est négatif, il est projeté en haut, lorsqu'il est positif, il est projeté en bas.
La taille de l'ombre et les principes d'expansion sont les mêmes que dans PS.

Compatibilité des navigateurs :
Différents navigateurs ont une compatibilité différente. Le navigateur du noyau Mozilla est écrit comme suit (mais de nouvelles versions de Firefox n'ont plus besoin d'être ajoutées) :
- moz-box-shadow : Type d'ombre
-webkit-box-shadow : Type d'ombre :

Rendu :

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

Changez le type de projection d'ombre de boîte en médaillon, rendu :

Exemple 2 :

Rendu :

<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

Ci-dessus, nous avons discuté de l'ombre de la couche CSS3 pour obtenir l'effet d'ombre de calque. Aujourd'hui, nous allons apprendre ensemble comment implémenter le texte. L'effet d'ombre utilisera un autre attribut de CSS3, text-shadow. Ces deux effets améliorent respectivement la texture du calque et du texte, créant un effet tridimensionnel.

Syntaxe :

text-shadow : déplacement sur l'axe X (positif ou négatif), déplacement sur l'Y- axe (à la fois positif et négatif), la largeur de l'ombre, la valeur de couleur de l'ombre

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

Description :

est similaire à l'ombre du calque, il peut également en appliquer une ou plusieurs groupes sur le même objet Effets d'ombre, séparés par des virgules. Le décalage de l'axe X peut être positif ou négatif. Lorsque X est positif, il est décalé vers la droite et lorsqu'il est négatif, il est décalé vers la gauche. Le décalage de l'axe Y peut être positif ou négatif. Lorsque X est positif, il se décale vers le bas et lorsqu'il est négatif, il se décale vers le haut. La valeur de couleur de l'ombre peut être une couleur transparente #xxx, RVB ou RVBA.

Exemple : text-shadow

L'effet d'affichage est le suivant :

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

Comparez box-shadow

L'effet est le suivant :

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

L'effet d'affichage est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!