为了在图像的左右两侧或任何其他内容上有一个漂亮的嵌入阴影，可以这样使用它(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 >

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

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

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

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

这招对我很管用:

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