Day9 | CSS 屬性 filter 的濾鏡效果

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 差異

filter:drop-shadow 與 box-shadow 差異示意圖

CodePen 範例

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

參考資訊