前端視覺優化（一）CSS邊框陰影、四周陰影講解

先上一個代碼

通俗講解吧，分5個參數 1.控制水平位置陰影，+為右邊，0為中間（即兩邊都有，通過參3控制大小） 2.控制垂直方向陰影，+為下邊，0為中間（即兩邊都有，通過參3控制大小） 3.模糊距離 4.陰影尺寸 （所謂向外延伸） （3和4實際效果有丟丟區分，自己調一下即可） 5.陰影顏色
· · ·

其實有6個參數，以下是官方文檔
h-shadow 	必需。水平陰影的位置。允許負值。 	測試
v-shadow 	必需。垂直陰影的位置。允許負值。 	測試
blur 	可選。模糊距離。 	測試
spread 	可選。陰影的尺寸。 	測試




color 	可選。陰影的顏色。請參閱 CSS 顏色值。 	測試
inset 	可選。將外部陰影 (outset) 改為內部陰影。

·

本人親調，十分順眼 哈哈

box-shadow: 0 0 5px 1px #999

·

2020.12.22補充

對上面內容微調了一下

陰影是可以做成彩虹光暈那樣子的，因為是可以同時設置多個背景陰影。即：box-shadow:5個參數，5個參數，5個參數。

應該都能看懂吧，要通過外延這個屬性，把最底部的顏色拉出來一些，才不會被上面的覆蓋（第一次逗號前顏色在最上面）

eg:box-shadow:1px 1px 3px red,2px 2px 3px yellow,3px 3px 3px orange

想要做成發光效果，就是白色陰影，配合明亮色背景，就有發光感覺

還有內陰影的，就是顏色參數後面加一個inset，一般用於點擊或者hover動畫