ハックや画像を使わずに、左右（水平？）の側面にボックスシャドウを付ける方法。使ってます：

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

しかし、それは周りに影を与えます。

要素の周囲に境界線はありません。

注：以下の@Hamishの回答を確認することをお勧めします。ここで説明するソリューションでは、不完全な「マスキング」は関係しません。

複数のボックスシャドウで近づくことができます。両側に1つずつ

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/

編集する

上下にボックスシャドウをさらに2つ追加して、にじみ出るものを隠します。

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/

ディーフォーのソリューションにある影の上部と下部が丸くなっていることに満足できなかったので、自分で作成しました。

inset box-shadow 上部と下部がカットされた素敵で均一な影を作成します。

要素の側面でこの効果を使用するには、2つの疑似要素:beforeを作成し:after、元の要素の側面に絶対的に配置します。

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>

編集する

デザインによってはclip-path、@ Lukeの回答に示されているように、を使用できる場合があります。ただし、この例でもわかるように、多くの場合、これによって依然として上部と下部で影が先細りになることに注意してください。

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>

これを試してください、それは私のために働いています：

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

古典的なアプローチ：負の広がり

CSS box-shadowは4つのパラメーターを使用します：h-shadow、v-shadow、blur、spread：

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

V-シャドウ（verical影）が0に設定されています。

ブラーパラメータは、グラデーション効果を追加するだけでなく、垂直方向の境界線にはほとんど影（私たちはを取り除きたい1）を追加します。

負の広がりは、すべての境界線の影を減らします。側面にある1つにあまり影響を与えずに、その小さな垂直の影を削除しようとすることができます（5〜10pxの小さな影の方が簡単です）。

ここではフィドルの例です。

2番目のアプローチ：側面の絶対div

要素に空のdivを追加し、要素のコンテンツに影響を与えないように絶対配置でスタイルを設定します。

ここでは、左の影の例のあるフィドル。

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

3番目：シャドウのマスキング

背景が固定されている場合は、背景の色が同じでぼかしが0の2つのマスキングシャドウを使用して、サイドシャドウ効果を非表示にできます。例：

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

黒い影にネガティブスプレッド（-3px）を再度追加したので、角を超えて伸びません。

ここフィドル。

これはすべてのブラウザで正常に機能します。

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

デモ

複数を使用する必要がありますbox-shadow;。インセットプロパティは見栄えが良く、内部にあります

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

もう1つの方法はoverflow-y:hidden、パディング付きの親です。

#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-path現在（2020）は、特に必要な効果が次のように特定のエッジの「クリーンカット」シャドウである場合に、要素の特定の側面でボックスシャドウを実現するために見つけた最良の方法です。

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

...このような減衰/減少/薄くなる影とは対照的に：

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

問題の要素に次のCSSを適用するだけです。

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

どこ：

• Apx 上端の影の可視性を設定します
• Bpx 正しい
• Cpx 底
• Dpx 左

シャドウを非表示にする必要があるエッジには値0を入力し、シャドウを表示する必要があるエッジには負の値（ぼかし半径+拡散値-の合計結果と同じXpx + Ypx）を入力します。

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

それは私の側で動作します。よろしくお願いします。

DIVS、画像、または内部コンテンツの左右のサイドにある素敵なインセットシャドウ

画像やその他のコンテンツの右側と左側に素敵なインセットシャドウを作成するには、このように使用します

*** z-index：-1は、画像またはインセット付きの内部オブジェクトを表示するときに便利です

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

状況によっては、別のコンテナで影を隠すことができます。たとえば、DIVの上下に影のあるDIVがある場合position: relative; z-index: 1;、周囲のDIVで使用できます。

水平のみの場合、親divのオーバーフローを使用してボックスシャドウをだますことができます。

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

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

もう1つのアイデアは、影を模倣するために、最終的に透明度のある暗いぼやけた疑似要素を作成することです。高さを少し減らし、幅を広くするig

その中の1つのdivを使用して、影を「消去」できます。

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

「height：％;」で遊ぶことができます。および「幅：％;」必要な影を消去します。

何らかの理由で、ここで提供された回答は私の場合には機能しません。だから、クリエイティブになりました。のlinear-gradient()代わりに使用するすべてのユーザーのための新しいソリューションを次に示します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>

私は要点を主張するつもりはありませんが、これは実際にあなた（私たち）が形成しようとしている「ボックス」でbox-shadowはないため、そもそも意味がなかったと言えます。

ブートストラップのshadow-smを右側にコピーしようとしましたが、これが私のコードです。

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