Comment créer une ombre de boîte gauche et droite uniquement en CSS ?

Comment appliquer une ombre de boîte uniquement sur les côtés gauche et droit

Pour obtenir un effet d'ombre de boîte uniquement sur les côtés gauche et droit côtés sans utiliser de hacks ou d'images, vous pouvez profiter de plusieurs ombres de boîte pour simuler le résultat souhaité. Voici comment :

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

Ce code crée deux ombres de boîte : une pour le côté gauche (décalage de -12 px) et une pour le côté droit (décalage de 12 px). Le décalage négatif pour l'ombre gauche et l'utilisation de -4px poussent l'ombre vers l'intérieur, garantissant qu'elle n'apparaît que sur les bords gauche et droit.

Remarque : Comme la solution fournie implique un "masquage " pour masquer l'ombre des autres côtés, envisagez d'explorer des approches alternatives, comme celle suggérée par @Hamish dans la réponse de référence, qui propose une solution plus robuste sans masquage.

Pour améliorer l'ombre des autres côtés, envisagez d'explorer des approches alternatives, comme celle suggérée par @Hamish dans la réponse de référence, qui propose une solution plus robuste sans masquage. effet supplémentaire, vous pouvez ajouter des ombres de boîte supplémentaires pour masquer toute ombre qui pourrait encore transparaître en haut et en bas :

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 code masque efficacement l'ombre en haut et en bas, fournissant un effet plus raffiné et souhaité.

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!