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

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

  <div class="shadow"></div>

</div>

.shadow{

    position:absolute;

    height: 100%;

    width: 4px;

    left:0px;

    top:0px;

    box-shadow: -4px 0 3px black;

}

第三名：遮蔽阴影

如果您有固定的背景，则可以使用两个具有相同背景色且模糊= 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），因此它不会延伸到角落之外。