box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 水平阴影的位置，必须填写，可以为负值
v-shadow 垂直阴影的位置，必须填写，可以为负值
blur 可选，模糊距离
spread 可选，阴影的外延值
color 可选，阴影的颜色
inset 可选，将外部阴影改为内部阴影

---

只设置外延 spread

---

水平方向移动5px

---

水平方向移动115px

spread:5px,在box的大小上往四周延申5px铺在box背后

---

1. border: 1px solid red;
2. background-color: #eee;
3. box-shadow: 0 0px 5px 0px blue;

border:1px  

spread:0; 蓝色块躲在灰色块后面

blur:5px ;模糊距离5px

---

1. width: 50px;
2. height: 50px;
3. padding: 20px;
4. border: 1px solid red;
5. background-color: #eee;
6. box-shadow: 0 0px 5px 3px blue;

---

box-shadow: 0 0px 8px 0px blue;

spread:0;

blue:8px   与上图 spread:3px blue5px 对比

---

box-shadow: 5px 5px 0 5px blue;

---

box-shadow: 30px 5px 0 5px blue inset;

---

box-shadow: 0 0px 0 5px #fff700 inset;

inset  spread:5px

---

box-shadow: 0 0px 35px 5px #0079ff inset;

inset  blur 调大  中间圆形效果

---

鼠标hover 显示box-shadow效果