css3中的filter屬性可以說是簡單易用且強大，這些效果作用在圖片上實現一些特效（也可以作用在vidio上，此處只討論圖片特效）。
瀏覽器兼容性
目前各大瀏覽器對於css3的兼容已經非常好了，最新版本都可以支持css3，老版本的ie9以下的還是不支持，不過這不是重點，微軟都准備放棄這些老古董了。另外ie的濾鏡也是可以做到的，會另加討論。
現在規范中支持的效果有：
- grayscale 灰度 值為0-1之間的小數
- sepia 褐色 值為0-1之間的小數
- saturate 飽和度 值為num
- hue-rotate 色相旋轉 值為angle
- invert 反色 值為0-1之間的小數
- opacity 透明度 值為0-1之間的小數
- brightness 亮度 值為0-1之間的小數
- contrast 對比度 值為num
- blur 模糊 值為length
- drop-shadow 陰影
用法是標准的CSS寫法，如：
-webkit-filter: blur(2px);
測試瀏覽器為chrom瀏覽器44.0版本，示例圖片中上方為原圖，下方為加fifter效果后的圖片。
grayscale灰度
如果使用該效果參數里沒值的話將會以100%來渲染，取值0-1之間為不同的灰度。下面實例為100%的渲染：-webkit-filter:grayscale(1) ;
sepia
褐色，就是美圖秀秀里有個懷舊功能的那種效果，取值也是0-1，-webkit-filter:sepia(1) ;
saturate飽和度
該屬性改變圖片的飽和度，取值范圍為數字即可，默認值100%，示例為800%：-webkit-saturate(6) ;
hue-rotate色相旋轉
hue-rotate用來改變圖片的色相，默認值為0deg，取值為angle，示例：-webkit-filter:hue-rotate(180deg)
invert反色
invert的效果就和照片底片有點相似，示例：-webkit-filter:invert(1)
opacity透明度
這個屬性經常遇到，示例：-webkit-filter:opacity(0.3)
brightness亮度
改變圖片的亮度，默認值為100%，示例：-webkit-filter:brightness(0.5)
contrast對比度
這個屬性取值和飽和度saturate類似，示例500%：-webkit-filter:contrast(5)
blur模糊
這個屬性改變圖片的清晰度，默認值為0，示例：-webkit-filter:blur(1px)
drop-shadow陰影
這個類似於box-shadow，給圖片加陰影，示例：-webkit-filter:drop-shadow(10px 10px 10px #000)
當然，添加多個屬性也是可以的，示例：-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);
就先這么多了，ie低版本的濾鏡效果下次再討論。