Comment utiliser CSS Box-Shadow pour réaliser l'effet combiné de l'ombre intérieure unilatérale et de l'ombre extérieure à trois côtés?

Les attributs CSS box-shadow sont utiles: Créez des effets visuels de l'ombre intérieure unique et de l'ombre extérieure à trois côtés

box-shadow est un outil de style puissant dans CSS, qui peut créer des effets d'ombre riches et divers et améliorer la hiérarchie visuelle de la conception Web. Cet article montrera comment utiliser cet attribut ingénieusement pour réaliser l'effet combiné de l'ombre intérieure supérieure et des ombres extérieures en bas, gauche et droite sur un élément div en même temps.

L'objectif est de créer une div avec une ombre intérieure sur le dessus et une ombre extérieure sur les trois autres côtés. Cela nécessite la fonction de superposition de box-shadow pour définir respectivement le rayon décalé, le rayon de flou, le rayon de diffusion et la couleur de chaque ombre.

Il est crucial de comprendre box-shadow . Cette propriété peut accepter plusieurs paramètres ombrés, chacun composé de décalage horizontal, de décalage vertical, de rayon de flou, de rayon de diffusion et de couleur. Le mot-clé inset est utilisé pour définir les ombres intérieures.

Le code suivant atteint l'effet attendu:

 Box-shadow: 14px 0 0 0 rouge, 
             0 -14px 0 0 bleu, 
             -11px 0 0 0 jaune, 
             encart de -20px -13px 9px 16px rose;

Le code définit quatre ombres:

• 14px 0 0 0 red : l'ombre extérieure rouge à droite.
• 0 -14px 0 0 blue : ombre extérieure bleue supérieure.
• -11px 0 0 0 yellow : l'ombre extérieure jaune à gauche.
• inset -20px -13px 9px 16px pink : Top Pink Inner Shadow.

Divers effets d'ombre peuvent être obtenus en ajustant le décalage horizontal, le décalage vertical, le rayon de flou, le rayon de diffusion et la couleur de chaque ombre. Les valeurs des paramètres doivent être affinées en fonction des exigences de conception réelles. Plusieurs valeurs d'ombre sont séparées par des virgules. Cette méthode contrôle la position, la couleur et le flou de chaque ombre pour obtenir l'effet visuel idéal.

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!