html 阴影只有两侧,如何仅在左侧和右侧获得阴影

经典方法：负向传播

CSS box-shadow使用4个参数：h-shadow，v-shadow，blur，spread：

box-shadow: 10px 0 8px -8px black;

的V-阴影(中古立式阴影)被设置为0。

该模糊参数添加渐变效果，而且还增加了对垂直边框(我们想摆脱的一个)一点点影子。

负传播会减少所有边界上的阴影：您可以使用它来尝试消除一点垂直阴影，而又不影响一侧的过多阴影(对于5到10像素的小阴影更容易。)

这里是一个小提琴的例子。

第二种方法：绝对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)，因此它不会延伸到角落之外。