grayscale 灰度 ? ? ? ? ? ? ? 值為0-1之間的小數(shù)?
sepia 褐色 ? 值為0-1之間的小數(shù)
saturate 飽和度 值為num
hue-rotate 色相旋轉 值為angle
invert 反色 ?值為0-1之間的小數(shù)
opacity 透明度 值為0-1之間的小數(shù)
brightness 亮度 ?值為0-1之間的小數(shù)
contrast 對比度 ?值為num
blur 模糊 ? ? 值為length
drop-shadow 陰影
下面一個一個介紹效果?
grayscale灰度
如果使用該效果參數(shù)里沒值的話將會以100%來渲染，取值0-1之間為不同的灰度恕洲。下面實例為100%的渲染：filter:grayscale(1) ;
sepia
褐色基矮，就是美圖秀秀里有個懷舊功能的那種效果，取值也是0-1诡挂，filter:sepia(1) ;
saturate飽和度
該屬性改變圖片的飽和度，取值范圍為數(shù)字即可堡掏，默認值100%呻纹，示例為600%：filter: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(6px)?
drop-shadow陰影
這個類似于box-shadow，給圖片加陰影超凳，示例：-webkit-filter:drop-shadow(10px 10px 10px #000)
當然愈污，添加多個屬性也是可以的，示例：filter:saturate(5) hue-rotate(500deg) grayscale(0.8) sepia(0.5) contrast(1.5) invert(0.4) brightness(1.8);
最近對css3的動畫特別感興趣
