Comment créer des ombres de boîte horizontales sans images ni astuces ?

Comment obtenir des ombres de boîte horizontales

Comment obtenir des ombres de boîte horizontales uniquement sur les côtés gauche et droit (horizontal ?) sans recourir à des astuces ou des images Obtenir un effet d'ombre de boîte ?

L'utilisation du code suivant produira un effet d'ombre environnant :

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

Solution : Utiliser plusieurs ombres de boîte

Vous pouvez utiliser plusieurs boîtes -shadow résout ce problème, chaque box-shadow Côté correspondant :

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

Masquage de l'ombre imparfaite (facultatif)

Pour masquer davantage l'effet de saignement, ajoutez deux couches d'ombre en bas et en haut pour le masquage :

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!