前端小知識:box-shadow的使用

box-shadow是css設置元素的陰影,有兩種,一種是外陰影,另外一種是內陰影,分別來看下怎麼使用

第一種:設置元素的外陰影:

box-shadow: 1px 2px 6px #888888;
第1值(1px) 控制左右方向陰影的位置,大於0控制右邊,小於0控制左邊,爲0則左右陰影距離同樣
第2值(2px) 控制上下方向陰影的位置,大於0控制下邊,小於0控制上邊,爲0則上下陰影距離同樣
第3值(6px) 控制陰影模糊距離,不能爲負數
第4值(#888888) 控制陰影的顏色

第二種:設置元素內陰影:

box-shadow: 1px 2px 6px #888888 inset;
第1值(1px) 控制左右方向陰影的位置,大於0控制左邊,小於0控制右邊,爲0則左右陰影距離同樣
第2值(2px) 控制上下方向陰影的位置,大於0控制上邊,小於0控制下邊,爲0則上下陰影距離同樣
第3值(6px) 控制陰影模糊距離,不能爲負數
第4值(#888888) 控制陰影的顏色
第5值 內陰影固定值:inset,外陰影不用此參數