NOTE: Je suggère de vérifier la réponse de @ Hamish ci-dessous; cela n’implique pas le “masquage” imparfait dans la solution décrite ici.

Vous pouvez vous rapprocher de plusieurs ombres de boîtes. un pour chaque côté

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

http://jsfiddle.net/YJDdp/

modifier

Ajoutez 2 ombres-boîtes supplémentaires pour le haut et le bas de l’avant afin de masquer le fond perdu.

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

http://jsfiddle.net/LE6Lz/

Je sais que c’est un ajout tardif, mais je n’étais pas satisfait du haut et du bas arrondis à l’ombre présente dans la solution de Deefour.

Voir la démo ici .

Encadré box-shadow; crée une belle ombre uniforme avec le haut et le bas coupés:

 box-shadow: -15px 0 15px -15px inset; 

Pour utiliser cet effet sur les côtés de votre élément, créez deux pseudo-éléments :before et :after positionnés absolument sur les côtés de l’élément d’origine.

 div { position: relative; } div:before { box-shadow: -15px 0 15px -15px inset; content: " "; height: 100%; left: -15px; position: absolute; top: 0; width: 15px; } etc... 

Essayez ceci, ça marche pour moi:

  box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333; 

Approche classique: écart négatif

L’ombre CSS utilise 4 parameters: h-shadow, v-shadow, blur, spread:

 box-shadow: 10px 0 8px -8px black; 

La v-shadow ( ombre verical) est définie sur 0.

Le paramètre de flou ajoute l’effet de dégradé, mais ajoute également une petite ombre sur les bordures verticales.

La propagation négative réduit l’ombre sur toutes les bordures: vous pouvez jouer avec elle en essayant de supprimer la petite ombre verticale sans trop affecter l’autre. (Cela peut être simple pour les petites ombres, comme 5-10 px.)

Voici un exemple de violon .

Deuxième approche: div absolu sur le côté

Ajouter un div vide dans votre élément et le styliser avec un positionnement absolu pour qu’il n’affecte pas le contenu de l’élément.

Ici le violon avec un exemple d’ombre gauche.

 
 
 
 .shadow{ position:absolute; height: 100%; width: 4px; left:0px; top:0px; box-shadow: -4px 0 3px black; } 

Troisièmement: Masking shadow

Si vous avez un arrière-plan fixe, vous pouvez masquer l’effet d’ombre avec deux ombres de masquage ayant la même couleur d’arrière-plan et le flou = 0, par exemple:

 box-shadow: 0 -6px white, // Top Masking Shadow 0 6px white, // Bottom Masking Shadow 7px 0 4px -3px black, // Left-shadow -7px 0 4px -3px black; // Right-shadow 

J’ai rajouté une image négative (-3px) à l’ombre noire, donc elle ne s’étend pas au-delà des coins.

Voici le violon

Cela fonctionne bien pour tous les navigateurs:

 -webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; -moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; 

DEMO

Vous devez utiliser le multiple box-shadow; . Inset propriété le faire paraître agréable et à l’intérieur

 div { box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8); width: 100px; height: 100px; margin: 50px; background: white; } 

Une autre façon consiste à: overflow-y:hidden sur le parent avec un remplissage.

 #wrap { overflow-y: hidden; padding: 0 10px; } #wrap > div { width: 100px; height: 100px; box-shadow: 0 0 20px -5px red; } 

http://jsfiddle.net/qqx221c8/

AGRANDISSEMENT DE BELLES PLACES SUR LES CÔTÉS GAUCHE ET DROITE POUR DIVS, IMAGES OU CONTENUS INTÉRIEURS

Pour obtenir une belle image dans les côtés droit et gauche des images, ou de tout autre contenu, utilisez-le de cette façon

*** Le z-index: -1 fait un bon tour en montrant des images ou des objects internes avec des encarts

Dans certaines situations, vous pouvez masquer l’ombre par un autre conteneur. Par exemple, s’il existe une DIV au-dessus et au-dessous de DIV avec l’ombre, vous pouvez utiliser la position: relative; z-index: 1; position: relative; z-index: 1; sur les DIVs environnantes.

Pour l’horizontal seulement, vous pouvez tromper l’ombre de la boîte en utilisant le débordement sur sa div parent:

 
 
content
 
 .parent{ overflow:hidden; } .box-shadow{ box-shadow: box-shadow: 0 5px 5px 0 #000; } 

Une autre idée pourrait être de créer un pseudo-élément flou sombre avec éventuellement de la transparence pour imiter l’ombre. Faites-le avec un peu moins de hauteur et plus de largeur ig

Vous pouvez utiliser 1 div à l’intérieur pour “effacer” l’ombre:

 .yourdiv{ position:relative; width:400px; height:400px; left:10px; top:40px; background-color:white; box-shadow: 0px 0px 1px 0.5px #5F5F5F; } .erase{ position:absolute; width:100%; top:50%; height:105%; transform:translate(0%,-50%); background-color:white; } 

Vous pouvez jouer avec “height:%;” et “width:%;” pour effacer quelle ombre vous voulez.