Jede Möglichkeit, Box-Shadow nur auf der linken und rechten (horizontalen?) Seite ohne Hacks oder Bilder zu erhalten. Ich benutze:

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

Aber es gibt überall Schatten.

Ich habe keine Grenzen um die Elemente.

HINWEIS: Ich schlage vor, die Antwort von @ Hamish unten zu lesen. es beinhaltet nicht die unvollständige "Maskierung" in der hier beschriebenen Lösung.

Sie können mit mehreren Kastenschatten nah kommen; eine für jede Seite

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/

Bearbeiten

Fügen Sie 2 weitere Box-Schatten für die Ober- und Unterseite vorne hinzu, um das Durchbluten auszublenden.

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/

Ich war nicht zufrieden mit der abgerundeten Ober- und Unterseite des Schattens in Deefours Lösung, also schuf ich meine eigene.

inset box-shadow erzeugt einen schönen gleichmäßigen Schatten, wobei Ober- und Unterseite abgeschnitten sind.

Um diesen Effekt an den Seiten Ihres Elements zu verwenden, erstellen Sie zwei Pseudoelemente :beforeund :afterpositionieren Sie sie absolut an den Seiten des ursprünglichen Elements.

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>

Bearbeiten

Abhängig von Ihrem Design können Sie möglicherweise verwenden clip-path, wie in der Antwort von @ Luke gezeigt. Beachten Sie jedoch, dass dies in vielen Fällen immer noch dazu führt, dass sich der Schatten oben und unten verjüngt, wie Sie in diesem Beispiel sehen können:

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>

Versuchen Sie dies, es funktioniert für mich:

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

Klassischer Ansatz: Negativer Spread

CSS Box-Shadow verwendet 4 Parameter: H-Shadow, V-Shadow, Blur, Spread:

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

Der V-Schatten (verischer Schatten) wird auf 0 gesetzt.

Der Parameter " Unschärfe" fügt den Verlaufseffekt hinzu, fügt aber auch einen kleinen Schatten an vertikalen Rändern hinzu (den, den wir entfernen möchten).

Negative Streuung reduziert den Schatten an allen Rändern: Sie können damit spielen und versuchen, diesen kleinen vertikalen Schatten zu entfernen, ohne den an den Seiten zu stark zu beeinflussen (es ist einfacher für kleine Schatten, 5 bis 10 Pixel).

Hier ein Geigenbeispiel .

Zweiter Ansatz: Absolute Div auf der Seite

Fügen Sie Ihrem Element ein leeres Div hinzu und formatieren Sie es mit absoluter Positionierung, damit es den Elementinhalt nicht beeinflusst.

Hier die Geige mit einem Beispiel für linken Schatten.

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

Drittens: Schatten maskieren

Wenn Sie einen festen Hintergrund haben, können Sie den Seitenschatteneffekt mit zwei Maskierungsschatten ausblenden, die dieselbe Hintergrundfarbe und Unschärfe = 0 haben. Beispiel:

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

Ich habe dem schwarzen Schatten erneut einen negativen Spread (-3px) hinzugefügt, damit er sich nicht über die Ecken hinaus erstreckt.

Hier die Geige .

Dies funktioniert gut für alle Browser:

-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

Sie müssen das Vielfache verwenden box-shadow;. Eingefügte Eigenschaft lassen es schön und innen aussehen

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

Ein anderer Weg ist mit: overflow-y:hiddenauf dem Elternteil mit Polsterung.

#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-pathist jetzt (2020) der beste Weg, um Box-Schatten auf bestimmten Seiten von Elementen zu erzielen, insbesondere wenn der erforderliche Effekt ein "sauber geschnittener" Schatten an bestimmten Kanten ist , wie folgt :

.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>

... im Gegensatz zu einem abgeschwächten / reduzierten / dünner werdenden Schatten wie diesem:

.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>

Wenden Sie einfach das folgende CSS auf das betreffende Element an:

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

Wo:

• Apx Legt die Schattensichtbarkeit für die Oberkante fest
• Bpx richtig
• Cpx Unterseite
• Dpx links

Geben Sie für alle Kanten, an denen der Schatten ausgeblendet werden soll, den Wert 0 und für alle Kanten, an denen der Schatten Xpx + Ypxangezeigt werden soll, einen negativen Wert (der dem kombinierten Ergebnis aus dem Unschärferadius + den Spreizwerten - entspricht ) ein.

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

Es funktioniert auf meiner Seite. Hoffe, es hilft dir.

NICE INSET SHADOW LINKS UND RECHTS FÜR DIVS, BILDER ODER INNENINHALT

Verwenden Sie diese Methode, um einen schönen Schatten auf der rechten und linken Seite von Bildern oder anderen Inhalten zu erhalten

*** Der Z-Index: -1 macht einen schönen Trick, wenn Bilder oder innere Objekte mit Einschüben angezeigt werden

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

In einigen Situationen können Sie den Schatten durch einen anderen Container ausblenden. Wenn sich beispielsweise über und unter dem DIV ein DIV mit dem Schatten befindet, können Sie ihn position: relative; z-index: 1;für die umgebenden DIVs verwenden.

Nur für Horizontale können Sie den Kastenschatten mit einem Überlauf auf dem übergeordneten Div austricksen:

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

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

Eine andere Idee könnte darin bestehen, ein dunkel verschwommenes Pseudoelement mit Transparenz zu erzeugen, um Schatten zu imitieren. Machen Sie es mit etwas weniger Höhe und mehr Breite ig

Sie können 1 div darin verwenden, um den Schatten zu "löschen":

.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;
}

Sie können mit "height:%;" und "width:%;" um den gewünschten Schatten zu löschen.

Aus irgendeinem Grund würden die hier gegebenen Antworten in meinem Fall einfach nicht funktionieren. Also wurde ich kreativ. Hier ist eine neue Lösung für Sie, die alles linear-gradient()anstelle von verwendet 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>

Obwohl ich nicht über den Punkt streiten möchte, ist dies nicht wirklich eine "Box", die Sie (wir) zu formen versuchen, also könnte man sagen, dass box-shadowdies zunächst keinen Sinn ergab.

Ich habe versucht, den Bootstrap Shadow-Sm genau auf der rechten Seite zu kopieren. Hier ist mein Code:

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