L'effet d'ombre CSS est une propriété CSS que nous utilisons souvent, mais l'avez-vous déjà bien compris ? Avez-vous simplement besoin de le copier directement depuis Blue Lake lorsque vous l'utilisez ? Comprenez-vous chacun de ses paramètres ? Quels beaux effets peut-on obtenir en utilisant les ombres ?
Les effets d'ombre sont souvent utilisés dans la conception Web. Les effets d'ombre peuvent mettre en évidence un élément. Avant l'avènement de CSS3, si nous voulions ajouter des effets d'ombre au texte ou aux éléments, nous devions utiliser des images pour y parvenir, ce qui était très gênant. Après l'émergence de CSS3, nous pouvons ajouter des effets d'ombre au texte ou aux éléments grâce aux deux propriétés text-shadow et box-shadow, sans utiliser d'images.
1. texte-ombre
En utilisant la propriété text-shadow de CSS, nous pouvons définir un effet d'ombre pour le texte. La syntaxe de la propriété est la suivante :
text-shadow:offset-xoffset-yblurcolor;
La syntaxe est expliquée comme suit :
(1) offset-x : paramètre obligatoire, définit le décalage horizontal de l'ombre, qui peut être une valeur négative ;
(2) offset-y : paramètre obligatoire, définit le décalage vertical de l'ombre, qui peut être une valeur négative ;
(3) flou : paramètre facultatif, définissez le rayon de flou. Plus la valeur est grande, plus le flou est important et plus le bord de l'ombre est flou. Les valeurs négatives ne sont pas autorisées ;
(4) color : paramètre facultatif, définissez la couleur de l'ombre. Si la valeur est omise ou non spécifiée, la valeur de l'attribut color est utilisée.
Astuce : utilisez l'attribut text-shadow pour définir plusieurs groupes d'effets d'ombre en même temps. Utilisez des virgules pour séparer chaque groupe. Les groupes d'effets d'ombre définis seront répertoriés par ordre de définition, avec la première ombre en haut et. bientôt. De plus, si vous souhaitez annuler l'effet d'ombre du texte, vous pouvez définir la valeur de l'attribut text-shadow sur none.
[Exemple] Utilisez l'attribut text-shadow pour ajouter un effet d'ombre au texte :
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :premier-enfant{text-shadow:5px8px3pxred;}</style><body><div>Text-shadow</div></body></html>Résultats en cours d'exécution :
Analyse : text-shadow : 5px 8px 3px rouge Description du paramètre ;
2.box-shadow
En utilisant la propriété box-shadow de CSS, nous pouvons définir l'effet d'ombre pour les éléments HTML. La syntaxe de la propriété est la suivante :
box-shadow:h-shadowv-shadowblurspreadcolorinset;
La syntaxe est expliquée comme suit :
(1) h-shadow : paramètre obligatoire, définit le décalage dans la direction horizontale de l'ombre, qui peut être une valeur négative ;
(2) v-shadow : paramètre obligatoire, définit le décalage dans la direction verticale de l'ombre, qui peut être une valeur négative ;
(3) flou : paramètre facultatif, définissez le rayon de flou. Plus la valeur est grande, plus le flou est important et plus le bord de l'ombre est flou. Les valeurs négatives ne sont pas autorisées ;
(4) spread : paramètre facultatif, définit la taille de l’ombre ;
(5) couleur : paramètre facultatif, définit la couleur de l’ombre ;
(6) encart : paramètre facultatif, modifie l'ombre extérieure par défaut (début) en ombre intérieure.
Astuce : Semblable à l'attribut text-shadow, l'attribut box-shadow peut également définir plusieurs groupes d'effets d'ombre en même temps. Utilisez des virgules pour séparer chaque groupe. Les multiples groupes d'effets d'ombre définis seront répertoriés par ordre de définition. avec la première ombre à la fin Ci-dessus, et ainsi de suite.
[Exemple] Utilisez l'attribut box-shadow pour ajouter un effet d'ombre au texte :
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style >div:premier-enfant{largeur:200px;hauteur:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>Résultats en cours d'exécution :
Analyse : box-shadow : 5px 8px 3px 2px rouge description du paramètre ;