任何方法都可以在左右两侧（水平？）获得箱形阴影，而没有任何骇客或图像。我在用：

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

但它给周围的阴影。

我周围没有边界。

注意：我建议在下面查看@Hamish的答案；它不涉及此处所述解决方案中不完善的“掩盖”。

您可以使用多个框阴影来接近；每一侧一个

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/

我对Deefour解决方案中存在的阴影的顶部和底部的圆角不满意，因此创建了自己的阴影。

inset box-shadow 创建一个很好的均匀阴影，顶部和底部被切除。

要在元素的侧面上使用此效果，请创建两个伪元素: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-阴影（中古立式阴影）被设置为0。

该模糊参数添加渐变效果，而且还增加了对垂直边框（我们想摆脱的一个）一点点影子。

负传播会减少所有边界上的阴影：您可以使用它来尝试消除一点垂直阴影，而又不影响一侧的过多阴影（对于5到10像素的小阴影更容易。）

这里是一个小提琴的例子。

第二种方法：绝对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;
}

第三名：遮蔽阴影

如果您有固定的背景，则可以使用两个与背景颜色相同且蒙版= 0的蒙版阴影隐藏侧影效果，例如：

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

另一种方法是：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;

它对我有效。希望对您有帮助。

左侧，右侧的漂亮内嵌阴影，可用于图像，图像或内部内容

要在图像或任何其他内容的左右两侧插入漂亮的阴影，请以这种方式使用

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

另一个想法可能是创建一个黑暗的模糊伪元素，最终具有透明性以模仿阴影。使它的高度稍小些，而宽度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开始并没有任何意义。

我试图在右侧复制bootstrap shadow-sm，这是我的代码：

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