文字添加陰影

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;

前面?zhèn)z個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);