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

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

3、常用filter函數(shù)
濾鏡效果

函數(shù)

補充

無

none

默認(rèn)值，表示沒有效果

模糊

blur(px)

為圖像設(shè)置高斯模糊，默認(rèn)值為 0，單位為像素，值較大越模糊

調(diào)整亮度

brightness(number)

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

調(diào)整灰度

grayscale(%)

將圖像轉(zhuǎn)換為灰度圖像，默認(rèn)值為 0%，表示原始圖像；100％ 表示將圖像完全變成灰度圖像（即黑白圖像），不允許為負(fù)值

調(diào)整對比度

contrast(%)

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

陰影

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

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

h-shadow：必填值，指定水平方向陰影的像素值，若值為負(fù)，則陰影會出現(xiàn)在圖像的左側(cè)；

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

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

spread：可選值，默認(rèn)值為 0，單位為像素。若值為正，則陰影將會擴(kuò)展并增大；若值為負(fù)，則陰影會縮小；

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

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

反轉(zhuǎn)圖像

invert(%)

默認(rèn)值為 0%，表示原始圖像；100% 則表示完全反轉(zhuǎn)，不允許使用負(fù)值

不透明度

opacity(%)

默認(rèn)值為 100%，表示原始圖像；0% 表示完全透明，不允許使用負(fù)值

圖像轉(zhuǎn)為棕褐色

sepia(%)

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

調(diào)整飽和度

saturate(%)

默認(rèn)值為 100%，表示原始圖像；0% 表示圖像完全不飽和，不允許使用負(fù)值

圖像色相旋轉(zhuǎn)

hue-rotate(deg)

該值用來定義色環(huán)的度數(shù)，默認(rèn)值為 0deg，代表原始圖像，最大值為 360deg

?