Comment créer une ombre de boîte uniquement sur les côtés gauche et droit d'un élément ?

Ombres de boîte limitées aux côtés gauche et droit sans hacks

Question :

Comment pouvez-vous créer une ombre de boîte exclusivement sur les côtés gauche et droit d'un élément sans recourir à des hacks ou images ?

Réponse :

La solution utilise plusieurs ombres de boîte, une pour chaque côté désigné :

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

Cependant, il convient de le noter que cette approche n’est pas entièrement parfaite, car elle peut entraîner des saignements d’ombre. Pour atténuer cela, des ombres de boîte supplémentaires peuvent être ajoutées en haut et en bas pour masquer le débordement :

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

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!