注意:我建议看看下面@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/

Edit

为顶部和底部添加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的解决方案中圆形的顶部和底部的阴影，所以创建了我自己的解决方案。

插入盒阴影创建一个漂亮的统一的阴影与顶部和底部切断。

要在元素的两侧使用此效果，请创建两个伪元素:before和:after，它们完全位于原始元素的两侧。

Div:之前，Div:之后{ 内容:“”; 高度:100%; 位置:绝对的; 上图:0; 宽度:15 px; ｝ div:{之前 盒子阴影:-15px 0 15px -15px插入; 左:-15 px; ｝ div:{后 盒子阴影:15px 0 15px -15px插入; 右:-15 px; ｝ div { 背景:继续; 身高:100 px; Margin: 0 50px; 宽度:100 px; 位置:相对; ｝ < div > < / div >

Edit

根据您的设计，您可以使用剪辑路径，如@Luke的回答所示。但是，请注意，在很多情况下，这仍然会导致阴影在顶部和底部逐渐减少，就像你在这个例子中看到的那样:

div { 宽度:100 px; 身高:100 px; 背景:# EEE; Box-shadow: 00 15px 0px #000; 剪辑路径:插入(0px -15px 0px -15px); 位置:相对; Margin: 0 50px; ｝ < div > < / div >

试试这个，对我很管用:

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

这适用于所有浏览器:

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

你必须使用多个盒子阴影;． Inset属性使它看起来很漂亮，在里面:

div { 框影:插入0 12px 15px -4px rgba(31, 73, 125, 0.8)，插入0 -12px 8px -4px rgba(31, 73, 125, 0.8); 宽度:100 px; 身高:100 px; 保证金:50 px; 背景:白色; ｝ < div > < / div >

负扩散和掩蔽阴影

CSS box-shadow使用4个参数:h-shadow, v-shadow, blur, spread:

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

模糊参数增加了渐变效果，但也增加了顶部和底部边界的阴影。为了消除这种副作用，我们可以使用:

负扩散减少了所有边界上的阴影:你可以尝试去除小的垂直阴影，而不影响侧面的阴影(对于小阴影更容易，5到10px)。 掩蔽与背景相同颜色的阴影(在本例中为白色)，这允许出现标记阴影。注意，这个掩蔽阴影需要有blur = 0来完全覆盖副作用。

这里有两个例子，第二个使用掩蔽阴影:

div { 宽度:100 px; 身高:100 px; 边框:1px纯绿色; 保证金:10 px; 浮:左; ｝ 例二号{ 盒子阴影:-10px 0 8px -8px黑色，10px 0 8px -8px黑色; ｝ # example2 { 不必: 0 -6px白色， 0 6px白色， -7px 0 4px -3px黑色 7px 0 4px -3px黑色; ｝ < div id = "例二" > < / div > < div id = " example2 " > < / div >

如果这些方法都不能满足您的需求，您还可以在任何现有div的旁边添加一个绝对div。

只需要记住将容器div设置为position: relative，这样绝对div就会留在里面。

#青年们{ 位置:相对; 宽度:100 px; 身高:100 px; 保证金:10 px; 边框:1px纯绿色; ｝ .shadow { 位置:绝对的; 高度:100%; 宽度:4 px; 左:0 px; 上图:0 px; Box-shadow: -4px 0 3px黑色; ｝ < div id = "青年们" > 内容在这里 < div class = "影子" > < / div > < / div >

为了在图像的左右两侧或任何其他内容上有一个漂亮的嵌入阴影，可以这样使用它(z-index:-1在显示带有嵌入的图像或内部对象时做了一个很好的技巧):

.shadowcontainer { 显示:inline-flex; 框影:插入-40px 0px 30px -30px rgba(0,0,0,0.9)，插入40px 0px 30px -30px rgba(0,0,0,0.9); ｝ .innercontent { z - index: 1 ｝ < div class = " shadowcontainer”> <img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/> < / div >

另一种方法是使用overflow-y:隐藏在带有填充的父类上:

身体{ 填充:30 px; ｝ #包装{ overflow-y:隐藏; 填充:0 10px; ｝ #包装> div { 宽度:100 px; 身高:100 px; Box-shadow: 0 0 20px -5px红色; ｝ < div id = " wrap " > < div > < / div > < / div >

在某些情况下，你可以用另一个容器来隐藏阴影。例如，如果在DIV的上面和下面有一个DIV的阴影，你可以使用position: relative;z - index: 1;周围的DIVs。

对于水平，你可以在它的父div上使用overflow欺骗box-shadow:

.parent { 溢出:隐藏; ｝ .box-shadow { Box-shadow: 0 5px 5px 0 #000; ｝ < div class = "父" > < div class = "不必“>内容div > < / < / div >

另一个想法可能是创建一个暗模糊的伪元素，最终与透明度模仿阴影。让它的高度稍低，宽度稍宽。

你可以在里面使用一个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;
}

你可以使用“高度:%;”和“宽度:%;”来删除你想要的阴影。

这招对我很管用:

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

我试图复制引导shadow-sm只是在右边，这是我的代码:

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

clip-path现在(2020)是我发现的在元素的特定侧面实现盒阴影的最佳方法，特别是当所需的效果是在特定边缘的“干净切割”阴影时，就像这样:

.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; Box-shadow: 0 0 10px 5px rgba(0,0,0,0.75); 剪辑路径:插入(0px -15px 0px -15px); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; ｝ < div class = " shadow-element " > < / div >

.．.而不是像这样减弱/减少/变薄的阴影:

.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; 盒影:15px 0 15px -10px rgba(0,0,0,0.75)， -15px 0 15px -10px rgba(0,0,0,0.75); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; ｝ < 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的组合结果相同)。

如果你想在你的div上面有一个箭头，使用这个:

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);