2020-09-16 box-shadow

用途：做一些阴影，或者外发光(调节模糊度和阴影长度)，内发光的效果 五个参数：

四个参数：

---

实战开始：首先要有个工具人div：

<div class="square"></div>

.square{
    width: 250px;
    height:250px;
    border:1px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

---

先把阴影放大方便观察：

box-shadow: 0px 0px 0px 40px red;

---

然后把阴影调模糊：

box-shadow: 0px 0px 40px 40px red;

---

调下x轴偏移值：可以看出其实是整个阴影向x轴右侧移动(负值即向x轴左侧移动)；y轴同理(正值向y轴下侧移动，负值向y轴上侧移动)

box-shadow: 90px 0px 40px 40px red;

---

还可以传入多个值：

box-shadow: 90px 0px 40px 40px red, -90px 0px 40px 40px green;}

---

内阴影：

box-shadow: inset 0px 0px 10px 10px red;

---

也移动一哈：可以看到相当于一个掏空中间的阴影向x轴右侧移动

box-shadow: inset 50px 0px 10px 10px red;