1、概念
filters是CSS3里新增的一種神奇的功能，一般我們提及濾鏡，就會想到使用PhotoShop制作的圖片，但是使用CSS濾鏡不需要任何作圖軟件，僅使用CSS就會生成多種的濾鏡效果，例如模糊效果、透明效果、色彩反差調整等等；同時，CSS濾鏡不僅可以對圖片進行濾鏡處理，還可以對網頁元素甚至視頻進行濾鏡處理。

2、使用
CSS 中實現濾鏡效果需要通過 filter 屬性并配合一些函數來實現。

3、常用filter函數
濾鏡效果

函數

補充

無

none

默認值，表示沒有效果

模糊

blur(px)

為圖像設置高斯模糊，默認值為 0，單位為像素，值較大越模糊

調整亮度

brightness(number)

number越大圖像越亮，number不能取負值，可以是整數也可以是百分比

調整灰度

grayscale(%)

將圖像轉換為灰度圖像，默認值為 0%，表示原始圖像；100％ 表示將圖像完全變成灰度圖像（即黑白圖像），不允許為負值

調整對比度

contrast(%)

默認值為 100％，代表原始圖像；0％ 將使圖像完全變黑；當值超過 100％ 時圖像將獲得更高的對比度

陰影

drop-shadow(h-shadow v-shadow blur spread color)

為圖像添加陰影效果，參數說明如下：

h-shadow：必填值，指定水平方向陰影的像素值，若值為負，則陰影會出現在圖像的左側；

v-shadow：必填值，指定垂直方向陰影的像素值，若值為負，則陰影會出現在圖像的上方；

blur：可選值，為陰影添加模糊效果，默認值為 0，單位為像素，值越大創建的模糊就越多（陰影會變得更大更亮），不允許使用負值；

spread：可選值，默認值為 0，單位為像素。若值為正，則陰影將會擴展并增大；若值為負，則陰影會縮小；

color：可選值，為陰影添加顏色，如未指定，則由瀏覽器來絕對，通常為黑色。

注意：Chrome、Safari 和 Opera 等瀏覽器不支持第 4 個參數，如果添加，則不會有任何效果

反轉圖像

invert(%)

默認值為 0%，表示原始圖像；100% 則表示完全反轉，不允許使用負值

不透明度

opacity(%)

默認值為 100%，表示原始圖像；0% 表示完全透明，不允許使用負值

圖像轉為棕褐色

sepia(%)

默認值為 0%，表示原始圖像；100% 表示圖像完全變成棕褐色，不允許使用負值

調整飽和度

saturate(%)

默認值為 100%，表示原始圖像；0% 表示圖像完全不飽和，不允許使用負值

圖像色相旋轉

hue-rotate(deg)

該值用來定義色環的度數，默認值為 0deg，代表原始圖像，最大值為 360deg

?