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

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

你必须使用多个盒子阴影;． 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 >

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

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

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

这适用于所有浏览器:

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