css3 滤镜

原图：

原图.png

a. 图像高斯模糊

  -webkit-filter:blur(4px);      
  // 范围随便写就行，记得加px 

高斯模糊.png

b. 图片进行棕褐色处理

  -webkit-filter:sepia(1);      
  // 处理范围是0-1或者0%-100%

棕褐色处理.png

c. 图片灰色处理

  -webkit-filter:grayscale(1);   
  // 范围是 0-1或者0%-100%

灰色处理.png

d. 图片反色处理

  -webkit-filter:invert(1);      
  // 范围是 0-1或者0%-100%

反色处理.png

e. 图像饱和度调节

  -webkit-filter:saturate(30);   
  // 范围是 取值范围>=0数字或百分比 1为无效果，0为灰度图

饱和度调节.png

f. 图像对比度调节

  -webkit-filter:contrast(90);   
  // 取值范围>=0数字或百分比 1为无效果

对比度调节.png

g. 图像亮度调节

  -webkit-filter:brightness(3);   
  // 取值范围>=0数字或百分比 1为无效果

亮度调节.png

h. 图像色相旋转

  -webkit-filter:hue-rotate(300deg);   
  // 取值范围0deg-365deg, 0默认值，为无效果

色相旋转.png

i. 阴影滤镜

  -webkit-filter:drop-shadow(5px 5px 3px #333);   
  // 取值范围0deg-365deg, 0默认值，为无效果

阴影滤镜.png