Demo
blur() 模糊效果
1 | filter: blur(5px); |
brightness() 調整亮度
函示內放入 % 數來調整亮度，< 100% 會減少亮度，> 100% 會增加亮度。0% 會呈現全黑，預設值為 1 。
1 | filter: brightness(2) |
contrast() 調整對比度
函示內放入 % 數來調整對比度，< 100% 會減少對比度，> 100% 會增加對比度。
1 | filter: contrast(200%) |
這個函數的特性和 box-shadow 的屬性很相似，但 drop-shadow 可以製作和物件不透明區域完全相同形狀的陰影，詳細比較可以參考這篇文章
drop-shadow() 可帶入的 4 個參數分別為：
- (必填)offset-x：陰影水平偏移量的長度
- (必填)offset-y：陰影垂直偏移量的長度
- blur-radius：隱影模糊程度，值越大越模糊
- color：陰影顏色
grayscale() 調整灰階程度
函示內放入 % 數或、0-1 來調整圖像灰度，值介於 0-100% 或 0-1，0% 和 0 代表顏色不變，為預設值，100% 和 1 代表變黑白的。
1 | filter:grayscale(1); |
hue-rotate() 色相相轉
透過色相旋轉來調整顏色呈現，函示內放入 deg 色環角度值來調整圖像灰度，值介於 0deg - 360deg 間，超過 360deg 的值相當於繞了一圈。
1 | filter: hue-rotate(90deg); |
invert() 負面效果
所謂的負片就是反轉成顏色和明暗程度，函示內放入 % 數設定反轉的程度，值介於 0-100% 間，預設值為 0%。
1 | filter: invert(100%); |
opactiy 調整透明度
函示內放入 % 數設定透明度，值介於 0-100% 間，預設值為 100%。
1 | filter: opacity(50%); |
saturate() 調整飽和度
函示內放入 % 數設定飽和度，預設值為 1<100% 越來越不飽和>100％ 高度飽和
1 | filter: saturate(200%); |
sepia() 深褐色效果
函示內放入 % 數設定深褐色的程度，值介於 0-100% 之間，預設值是 0。
1 | filter: sepia(100%) |
複合效果
1 | /* 同時設定對比度、亮度、飽和度*/ |