css单边投影与双侧投影

box-shadow做单边投影的核心是第四个参数 扩张半径，这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。

因此，如果此时给予一边一个正的偏移，你就会在该侧看到单边投影的效果。

顶部单边投影：

box-shadow: #000 0 -5px 5px -5px;

底部单边投影：

box-shadow: #000 0 5px 5px -5px;

左侧单边投影：

box-shadow: #000 -5px 0 5px -5px;

右侧单边投影：

box-shadow: #000 5px 0 5px -5px;

如果我们想在两侧投影：

box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000

查看原文链接： https://www.chengrang.com/box-shadow-one-side.html