Comment puis-je créer des ombres de boîte uniquement sur les côtés gauche et droit d'un élément ?

Personnalisation Box-Shadow : obtenir des ombres exclusivement sur les côtés gauche et droit

Dans le but d'améliorer l'attrait visuel des éléments, vous visez pour incorporer des ombres de boîte qui apparaissent uniquement sur les côtés gauche et droit. Cependant, votre implémentation actuelle a entraîné l'apparition d'ombres de tous les côtés. Pour relever ce défi, explorons une solution utilisant plusieurs ombres de boîte.

Tout d'abord, concentrons-nous sur la réalisation d'ombres sur les côtés souhaités. En ajustant les valeurs dans la propriété, vous pouvez définir les décalages horizontaux et verticaux. Observez le code suivant :

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

Dans cet exemple, la première box-shadow crée une ombre à 12 pixels du bord gauche et 15 pixels en dessous, s'étendant vers la droite. La deuxième ombre de boîte simule l'ombre sur le côté droit.

Cependant, vous remarquerez peut-être un léger écart dans l'ombre en raison du manque d'ombres sur les bords supérieur et inférieur. Pour remédier à cela, des box-shadows supplémentaires sont nécessaires :

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

Ces ombres supplémentaires introduisent un masquage en créant une "bordure" blanche autour de l'élément. Cela masque efficacement les espaces, ce qui donne une ombre horizontale nette.

N'oubliez pas que cette technique n'est peut-être pas parfaite et que vous pourriez rencontrer des imperfections mineures. Cependant, il offre une approche pratique pour réaliser des ombres exclusivement sur les côtés gauche et droit, améliorant ainsi l'attrait esthétique de vos éléments.

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!