box-shadow

该属性可以设置阴影

属性

box-shadow 属性 有5个 不同的部分组成（这5个部分不需要都写，要注意顺序）

box-shadow: offset-x offset-y blur spread color position;

offset-x

阴影 水平方向 的偏移，即阴影在 x 轴的位置：

• 值为 0，左右都有阴影
• 值为 正数 时，阴影在元素的 右侧
• 值为 负数 时，阴影在元素的 左侧

例子：

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

offset-y

阴影 竖直方向 的偏移，即阴影在 y 轴的位置：

• 值为 0，上下都有阴影
• 值为 正数 时，阴影在元素的 下方
• 值为 负数 时，阴影在元素的 上方

例子：

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

blur

阴影的 模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。

• 值为 0 意味着该阴影是 固态而锋利的，完全没有模糊效果。
• blur 值越大，阴影 越不锋利而更朦胧模糊

注意：不能是负值

例子：

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

spread

阴影 扩展半径，其值可以是正负值：

• 值为正，则整个阴影都延展扩大
• 值为负值，则缩小。

注意：前提是存在阴影模糊半径

例子：

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5) }

color

color 部分的值正如你所预料的，是指阴影的颜色。它可以是任意的颜色单元 （见 在 CSS 中与颜色打交道）。

.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

position

此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，值是 inset 表示内阴影

.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset}

参考：
https://blog.csdn.net/qq_47443027/article/details/116042399