Comment puis-je créer une ombre-boîte uniquement sur les côtés horizontaux d'un élément ?

Créer des ombres de boîte uniquement sur les côtés horizontaux

Pour obtenir une ombre de boîte qui s'étend uniquement sur les côtés gauche et droit (horizontaux) d'un élément, envisagez d'exploiter plusieurs définitions box-shadow.

La propriété initiale box-shadow,

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

produit une ombre sur tous les côtés de l’élément. Pour cibler uniquement les côtés gauche et droit, ajoutez deux ombres de boîte distinctes :

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

Cela créera une ombre qui s'étendra de 12 pixels vers la droite et de -12 pixels vers la gauche, obtenant ainsi l'effet souhaité.

Vous pouvez également rencontrer une légère fuite de l'ombre sur les côtés supérieur et inférieur. Pour atténuer cela, ajoutez deux ombres de boîte supplémentaires pour masquer le saignement :

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

Cette définition mise à jour masquera le saignement et confinera l'ombre aux côtés gauche et droit de l'élément sans utiliser de hacks ou d'images.

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!