文字添加陰影
text-shadow:#996600 5px 5px 10px;
語法: box-shadow: h-shadow v-shadow blur spread color inset;
(box-shadow: 水平陰影 垂直陰影 模糊距離 陰影大小 陰影顏色 內(nèi)部陰影;)
水平陰影逾条、垂直陰影值必填,其余值可選师脂;
屏幕快照 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);
}
內(nèi)陰影
屏幕快照 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 代表 內(nèi)邊框吃警。不寫則是外邊框
下部陰影
屏幕快照 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內(nèi)部陰影
屏幕快照 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);