CSS - 阴影 box-shadow-

文字添加阴影

text-shadow:#996600 5px 5px 10px;

---

语法： box-shadow: h-shadow v-shadow blur spread color inset;

(box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内部阴影;)

水平阴影、垂直阴影值必填，其余值可选；

屏幕快照 2018-03-28 上午11.33.23.png

.screen-6 .buy-btn {
    transition: all 0.5s;
}
.screen-6 .buy-btn:hover {    
    box-shadow: 0 10px 10px rgba(0,0,0,.5);
    transform: translate(0,-5px);
}

---

内阴影

屏幕快照 2018-04-20 下午1.49.58.png

box-shadow: 0 0 10px 10px #06c inset;

---

屏幕快照 2018-04-20 下午1.54.31.png

box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.1) inset;

前面俩个0 代表 四边
13px 代表 模糊面积的大小
3px 代表 灰色 边框的粗细
inset 代表 内边框。不写则是外边框

---

下部阴影

屏幕快照 2018-04-21 下午4.51.16.png

box-shadow: 0 12px 24px 0 rgba(7, 17, 27, 0.2);

---

按钮阴影

屏幕快照 2018-05-25 下午3.04.31.png

box-shadow: 0 0 80px rgba(4, 100, 239, 0.6);

---

文字阴影

屏幕快照 2018-06-09 下午4.52.54.png

---

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]。投影方式有两种：inset、outset，默认投影方式outset。

boxshadow内部阴影

屏幕快照 2018-03-02 上午10.46.27.png

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

---

image.png

box-shadow: 0px 15px 30px rgba(0,0,0,0.1);

---

image.png

box-shadow: 0 20px 20px -20px rgba(0, 36, 100, 0.3);
transform: translateY(-6px);
transition: all 0.3s ease 0s;

---

屏幕快照 2019-01-08 下午5.07.14.png

    box-shadow: 0 4px 8px 0 rgba(28,31,33,.1);

---

屏幕快照 2019-01-08 下午5.08.10.png

    box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);