filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像鹏漆，背景和邊框的渲染犹菇。
CSS標準里包含了一些已實現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個SVG濾鏡雀监，通過一個URL鏈接到SVG濾鏡元素(SVG filter element)。filter定義的10種效果分別是：blur眨唬、opacity滔悉、grayscale、sepia单绑、saturate、hue-rotate曹宴、invert搂橙、brightness、contrast、drop-shadow区转。
1.blur
blur 即模糊效果苔巨，例如網(wǎng)易云網(wǎng)頁播放頁面。單位是px废离，效果可以打開f12編輯添加css屬性filter: blur(10px)侄泽；
左邊是加了10px的模糊圖，右邊是原圖蜻韭。注意：blur里的值必須為正值悼尾，設(shè)置為負數(shù)是沒效果的！
2.opacity
透明度肖方，跟css opacity效果類似 設(shè)置元素的透明度 值在0~1之前闺魏，0為完全透明， 1為無效果俯画，這里我們設(shè)置屬性 filter: opacity(0.5)
左邊是設(shè)置透明度的圖片析桥，右邊是原圖。
3.grayscale
使圖片變灰的效果艰垂，值在0~1之間泡仗，1為完全變灰，0表示無效果猜憎。這里我們設(shè)置屬性filter: grayscale(1)
4.sepia
褐色效果娩怎，值也在0~1之間， 0無效果拉宗，1完全變褐峦树。效果如圖 這里我設(shè)置的是1
5.saturate
飽和度屬性，取值大于等于0旦事，當取值為0時 效果和grayscale(1)類似魁巩。效果如圖 我設(shè)置飽和度為0
6.invert
顏色反轉(zhuǎn)屬性，值在0 ~ 1或者0 ~ 100%之間姐浮，當為1或100%時為完全反轉(zhuǎn)谷遂。
7.brightness
亮度，取值為數(shù)字或百分數(shù)卖鲤，當取值為1時肾扰，與原圖一致，當取值為0或者負數(shù)是為全黑蛋逾，當取值為0-1時集晚，亮度降低，當取值大于1時区匣，亮度增大偷拔。
8.contrast
對比度，取值為大于或等于0的數(shù)字或百分數(shù)，當取值為1時莲绰，與原圖一致欺旧，當取值為0-1時，對比度降低蛤签，當取值大于1時辞友，對比度增大。
9.drop-shadow
陰影效果震肮，類似box-shadow称龙，這里我們設(shè)置屬性值為 drop-shadow(10px, 10px, grey)
10.hue-rotate
色彩旋轉(zhuǎn)，取值是角度钙蒙，單位是deg,這里我們設(shè)置屬性值為hue-rotate(45deg)
