N'importe quel moyen d'obtenir une zone d'ombre sur les côtés gauche et droit (horizontal?) Uniquement sans piratage ni images. J'utilise:

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

Mais ça donne de l'ombre tout autour.

Je n'ai pas de frontières autour des éléments.

REMARQUE: je suggère de vérifier la réponse de @ Hamish ci-dessous; il n'implique pas le "masquage" imparfait dans la solution décrite ici.

Vous pouvez vous approcher avec plusieurs ombres en boîte; 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/

Éditer

Ajoutez 2 ombres de boîte supplémentaires pour le haut et le bas à l'avant pour masquer ce qui saigne.

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 n'étais pas satisfait du haut et du bas arrondis de l'ombre présente dans la solution de Deefour alors j'ai créé la mienne.

inset box-shadow crée une belle ombre uniforme avec le haut et le bas coupés.

Pour utiliser cet effet sur les côtés de votre élément, créez deux pseudo-éléments :beforeet :afterpositionnés absolument sur les côtés de l'élément d'origine.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

Éditer

Selon votre conception, vous pourrez peut-être utiliser clip-path, comme indiqué dans la réponse de @ Luke. Cependant, notez que dans de nombreux cas, cela entraîne toujours la réduction de l'ombre en haut et en bas, comme vous pouvez le voir dans cet exemple:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Essayez ça, ça marche pour moi:

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

Approche classique: spread négatif

CSS box-shadow utilise 4 paramètres: h-shadow, v-shadow, blur, spread:

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

L' ombre en V ( ombre verticale) est définie sur 0.

Le paramètre flou ajoute l'effet de dégradé, mais ajoute également une petite ombre sur les bordures verticales (celle dont nous voulons nous débarrasser).

La propagation négative réduit l'ombre sur toutes les bordures: vous pouvez jouer avec elle en essayant de supprimer cette petite ombre verticale sans trop affecter celle des côtés (c'est plus facile pour les petites ombres, 5 à 10 pixels).

Voici un exemple de violon .

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

Ajoutez un div vide dans votre élément et stylisez-le avec un positionnement absolu afin qu'il n'affecte pas le contenu de l'élément.

Voici le violon avec un exemple d'ombre gauche.

<div id="container">
  <div class="shadow"></div>
</div>

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

Troisièmement: Masquer l'ombre

Si vous avez un arrière-plan fixe, vous pouvez masquer l'effet d'ombre latérale avec deux ombres de masquage ayant la même couleur d'arrière-plan et 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 à nouveau ajouté une propagation négative (-3px) à l'ombre noire, afin qu'elle ne s'étende 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;. La propriété en médaillon donne une belle apparence à 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 est de: overflow-y:hiddensur le parent avec un rembourrage.

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

http://jsfiddle.net/qqx221c8/

clip-pathest maintenant (2020) le meilleur moyen que j'ai trouvé pour obtenir des ombres sur des côtés spécifiques d'éléments, en particulier lorsque l'effet requis est une ombre "nette" sur des bords particuliers , comme ceci:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... par opposition à une ombre atténuée / réduite / éclaircie comme celle-ci:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

Appliquez simplement le CSS suivant à l'élément en question:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Où:

• Apx définit la visibilité des ombres pour le bord supérieur
• Bpx droite
• Cpx bas
• Dpx la gauche

Entrez une valeur de 0 pour toutes les arêtes où l'ombre doit être masquée et une valeur négative (identique au résultat combiné du rayon de flou + valeurs d'étalement - Xpx + Ypx) pour toutes les arêtes où l'ombre doit être affichée.

box-shadow: 0 5px 5px 0 #000;

Ça marche de mon côté. J'espère que cela vous aide.

JOLIE OMBRE INSERT SUR LES CÔTÉS GAUCHE ET DROITE POUR DIVS, IMAGES OU CONTENU INTÉRIEUR

Pour une belle ombre incrustée sur les côtés droit et gauche des images ou de tout autre contenu, utilisez-le de cette façon

*** L'index z: -1 fait une bonne astuce lors de l'affichage d'images ou d'objets internes avec des encarts

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

Dans certaines situations, vous pouvez masquer l'ombre par un autre conteneur. Par exemple, s'il y a un DIV au-dessus et en dessous du DIV avec l'ombre, vous pouvez l'utiliser position: relative; z-index: 1;sur les DIV environnants.

Pour l'horizontale uniquement, vous pouvez tromper l'ombre de la boîte en utilisant le débordement sur sa div parent:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.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 foncé 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 "hauteur:%;" et "largeur:%;" pour effacer l'ombre que vous voulez.

Pour une raison quelconque, les réponses fournies ici ne fonctionneraient tout simplement pas dans mon cas. Donc, je suis devenu créatif. Voici une nouvelle solution pour vous tous qui utilise linear-gradient()à la place de box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

Bien que je ne cherche pas à argumenter ce point, ce n'est pas vraiment une "boîte" que vous (nous) essayons de former, donc je suppose qu'on pourrait dire que cela box-shadown'avait pas de sens pour commencer.

J'ai essayé de copier le bootstrap shadow-sm juste à droite, voici mon code:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}