CSS 屬性 filter 的濾鏡效果，可套用於元素上，常用於圖片、背景、邊框。

❒ drop-shadow 陰影效果

語法： filter: (drop-shadow(參數1 參數2 參數3 參數4))

參數1 必填，陰影位置，水平與垂直距離。

參數2 選填，陰影的模糊半徑

參數3 選填，陰影的擴張半徑

參數4 設定陰影的顏色，可使用 rgba(值)。

範例：CodePen 程式碼

❒ blur 高斯模糊

語法： filter: blur(單位)

單位： px 或是 rem，不接受百分比為單位。預設為 0，數值越高越模糊。

範例： CodePen 程式碼

❒ grayscale 灰階

語法：filter: grayscale(單位)

單位：％。默認為 0，值為 0% ~ 100% 間，100% 元素會轉為灰色。

範例：CodePen 程式碼

❒ hue-rotate 色相旋轉

語法：filter: hue-rotate(單位)

單位： 預設 0deg，以度(deg) 為單位。

範例： CodePen 程式碼

❒ invert 負片效果

語法： filter: invert(單位)

單位： 預設 0，小數點或百分比為單位，默認為 0%，值為 0% ~ 100% 間。

範例： CodePen 程式碼

❒ opacity 透明度

語法： filter: opacity(單位)

單位： 預設 1，小數點或百分比為單位。值為 0% ( 完全透明 ) ~ 100% 間 ( 原始狀態 )。

範例： CodePen 程式碼

❒ saturate 飽和度

語法： filter: saturate(單位)

單位： 預設 1，小數點或百分比為單位。值 0% 為完全不飽和， 100% 為原始狀態，超過 100% 為更高的飽和度。

範例： CodePen 程式碼

❒ sepia 懷舊

語法： filter: sepia(單位)

單位： 預設 0，小數點或百分比為單位。值為 0% ( 原始狀態 ) ~ 100% 間 ( 深褐色 )。

範例： CodePen 程式碼

❒ contrast 對比度

語法： filter: contrast(單位)

單位： 預設 1，小數點或百分比為單位。值 0% 為全黑， 100% 為原始狀態，超過 100% 為更低的對比。

範例： CodePen 程式碼

❒ brightness 亮度

語法： filter: brightness(單位)

單位： 預設 1，小數點或百分比為單位。值 0% 為全黑， 100% 為原始狀態，超過 100% 會越來越亮。

範例： CodePen 程式碼

❒ 「 contrast 對比度、brightness 亮度 」組合

語法： filter: contrast(單位) brightness(單位)

範例： CodePen 程式碼

❒ filter:drop-shadow 與 box-shadow 差異

CodePen 範例

範例中的圖片皆為 png 檔，可見 drop-shadow  會依元素的內容產生陰影，而 box-shadow  則是以區塊的方式來產生。

參考資訊

• CSS 筆記 - CSS Filter 濾鏡效果
• MDN - filter