提姆寫程式

0%

CSS 筆記 - box-shadow & drop-shadow 的差異

發表於 更新於 分類於 Disqus：
在畫面加分的 shadow 語法

shadow

陰影在呈現元素層次非常好用，尤其是扁平化設計的稿件，恰當的使用陰影，更能凸顯質感與層次。

box-shadow

幾個比較常用的如下，

1
2
3
4
5
6
7
8
9
10
11
//x 軸-位移 | y 軸-位移 | 顏色
box-shadow: 5px 5px gray;

//x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜ 顏色
box-shadow: 5px 5px 5px gray;

//x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜擴散值 spread-radius｜顏色
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

//內側 ｜ x 軸-位移 | y 軸-位移 | 模糊值 blur-radius ｜ 擴散值 spread-radius ｜ 顏色
box-shadow: inset 0 0 20px 5px gray;

codepen https://codepen.io/tim_hsu/pen/jObRPML

box-shadow 簡單來說就是以本身的形狀，新增一個相同形狀的元素，並可設定該元素的位置、模糊、顏色等參數；如上範例，所產生的陰影，與原本的元素形狀是相同的。

如果不想自己腦補空想效果，可以使用 Box-shadow 產生器。

但如果是一張去背的圖案想加入陰影的話，可以用 drop-shadow。

drop-shadow

跟 box-shadow 用法相似，可以處理不規則的圖片陰影，寫法稍微有點不同，如下:

1
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.8));

box-shadow 是以元素的形狀延伸的陰影，而 drop-shadow 可以按照元素的的條件形成對應的陰影，並不會直接填滿顏色。

codepen: https://codepen.io/tim_hsu/pen/KKdYpyQ

參考資料：