css3中的filter屬性可以說是簡單易用且強大，這些效果作用在上實現一些特效（也可以作用在vidio上，此處只討論特效）。
瀏覽器相容性
目前各大瀏覽器對於css3的相容已經非常好了，最新版本都可以支援css3，老版本的ie9以下的還是不支援，不過這不是重點，微軟都準備放棄這些老古董了。另外ie的濾鏡也是可以做到的，會另加討論。
現在規範中支援的效果有：
用法是標準的css寫法，如：
-webkit-filter: blur(2px);grayscale灰度測試瀏覽器為chrom瀏覽器44.0版本，示例中上方為原圖，下方為加fifter效果後的。
如果使用該效果引數裡沒值的話將會以100%來渲染，取值0-1之間為不同的灰度。下面例項為100%的渲染：-webkit-filter:grayscale(1) ;
褐色，就是美圖秀秀裡有個懷舊功能的那種效果，取值也是0-1，-webkit-filter:sepia(1) ;
saturate飽和度
hue-rotate色相旋轉
invert反色
invert的效果就和**底片有點相似，示例：-webkit-filter:invert(1)
opacity透明度
這個屬性經常遇到，示例：-webkit-filter:opacity(0.3)
brightness亮度
contrast對比度
這個屬性取值和飽和度saturate類似，示例500%：-webkit-filter:contrast(5)
blur模糊
drop-shadow陰影
當然，新增多個屬性也是可以的，示例：-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);
就先這麼多了，ie低版本的濾鏡效果下次再討論。
關於 CSS3 中的 filter 濾鏡 屬性
filter屬性定義了元素 通常是 的可視效果 例如 模糊與飽和度 css語法 filter none blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia url 提示 若想在...
css3中強大的filter 濾鏡 屬性
css3中強大的filter 濾鏡 屬性 1定義 filter，從字面意思來看就是濾鏡，官方定義filter屬性定義了元素 通常是 的可視效果 例如 模糊與飽和度 舉個栗子 看到這個效果，博友們是不是都開始對filter開始感興趣了呢 2語法 filter none blur brightness ...
CSS3的濾鏡filter屬性
css3的濾鏡filter屬性，可以對網頁中的進行類似photoshop處理的效果，例如背景的毛玻璃效果 老 黑白 火焰效果等。注意 這個 drop shadow 與 box shadow 都是在說陰影，但還是有區別的，看下圖 圖中火焰的，是一張png，除了火焰以外，其他部分是透明的，我們能看見，b...