如何仅在左侧和右侧获得阴影

Question

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

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

但它给周围的阴影。

我周围没有边界。

Answer 1

经典方法：负向传播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">&nbsp; <div class="shadow"></div></div>.shadow{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 4px;&nbsp; &nbsp; left:0px;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; box-shadow: -4px 0 3px black;}第三名：遮蔽阴影如果您有固定的背景，则可以使用两个具有相同背景色且模糊= 0的遮罩阴影来隐藏侧影效果，例如：box-shadow:&nbsp;&nbsp; &nbsp; 0 -6px white,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Top Masking Shadow&nbsp; &nbsp; 0 6px white,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Bottom Masking Shadow&nbsp; &nbsp; 7px 0 4px -3px black,&nbsp; // Left-shadow&nbsp; &nbsp; -7px 0 4px -3px black; // Right-shadow我再次在黑色阴影上添加了负差（-3px），因此它不会延伸到角落之外。