L'utilisation de l'ombre du calque CSS3 et de l'ombre du texte

Cet article présente principalement l'utilisation des ombres de calque CSS3 et des ombres de texte. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

calque box-shadow L'attribut shadow. et l'attribut text-shadow text shadow sont similaires dans leur utilisation. Ils utilisent tous deux les systèmes de coordonnées des axes X et Y pour contrôler l'expansion de l'ombre. Nous expliquerons ici en détail l'utilisation des effets d'ombre de calque CSS3 et d'ombre de texte :

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 de l'ombre
Le type d'ombre peut être omis et 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 boîte-ombre 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 calque CSS3 box-shadow pour obtenir l'effet d'ombre de calque. Aujourd'hui, nous allons apprendre ensemble comment obtenir l'effet d'ombre de texte. Nous utiliserons 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 (soit positif, soit négatif), Déplacement sur l'axe Y (soit positif, soit 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 au calque d'ombre. Il peut également appliquer un ou plusieurs ensembles d'effets d'ombre. au même objet, séparés par des virgules ouvertes. 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>

Comparer 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 complet de l'article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :

Analyse sur la différence entre l'utilisation de rgba et de l'opacité pour définir la transparence en CSS

Comment utiliser CSS3 pour obtenir plusieurs éléments affichés en séquence

Comment utiliser CSS pour étirer et remplir l'image d'arrière-plan afin d'éviter un affichage répété

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!