如何仅在左侧和右侧获得箱形阴影
任何方式获得左侧（右侧）的方块阴影只有没有黑客或图像。 我在用：
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8); 但它给周围的影子。
我没有围绕元素的边界。
注意：我build议检查下面的@Hamish的答案 ; 它不涉及这里描述的解决scheme中不完美的“掩蔽”。
你可以靠近多个箱子阴影; 每边一个
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
编辑
为顶部和底部的前面添加2个盒子阴影，以掩盖stream血。
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);
我知道这是一个很晚的加法，但是我对于Deefour解决scheme中的影子圆润的顶部和底部并不满意，所以我创build了自己的影子。
在这里看到演示 。
插入box-shadow; 创build一个很好的统一的阴影与顶部和底部切断：
box-shadow: -15px 0 15px -15px inset;
要在你的元素的边上使用这个效果，创build两个伪元素:before和:after在原始元素的边上绝对定位。
div { position: relative; } div:before { box-shadow: -15px 0 15px -15px inset; content: " "; height: 100%; left: -15px; position: absolute; top: 0; width: 15px; } etc...
试试这个，它为我工作：
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
经典方法：消极传播
CSS阴影使用4个参数： h-shadow，v-shadow，blur，spread：
box-shadow: 10px 0 8px -8px black;
v-shadow （阴影）被设置为0。
blur参数添加了渐变效果，但在垂直边框上也添加了一点阴影。
消极的传播减less了所有边界的阴影：你可以玩它试图去除小的垂直阴影，而不会影响太多。 （它可以很简单的小阴影，像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; }
第三：掩蔽阴影
如果您有一个固定的背景，您可以隐藏两个具有相同背景颜色的遮蔽阴影和blur = 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），所以它不会伸展到angular落之外。
这里的小提琴 。
这适用于所有浏览器：
-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;
DEMO
您必须使用多个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用padding overflow-y:hidden父项。
#wrap { overflow-y: hidden; padding: 0 10px; } #wrap > div { width: 100px; height: 100px; box-shadow: 0 0 20px -5px red; }
NICE INSET影子在左，右侧的DIVS，图像或内容
对于图像右侧或左侧的一个不错的插入阴影，或任何其他内容，使用这种方式
*** z-index：-1在用插图显示图像或内部对象时可以很好地利用它
<html> <div class="shadowcontainer"> <img src="https://www.google.eshttp://img.dovov.comsrpr/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上方和下方都有阴影，则可以使用position: relative; z-index: 1; 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; }
另一个想法可能是创build一个黑暗模糊的伪元素，最终透明地模仿阴影。 使它略高一点，宽度更ig
