清明已过,谷雨未来。
一行代码变灰术：
-webkit-filter: grayscale(1)
就这么顺利的完成了，就是给加了上面的样式而已。这里用到的是css3的滤镜，那我们顺便看看滤镜的其他用法吧！
-webkit-fiter是css3的一个属性
嗯，对，IE不支持。当然IE有它自己的实现滤镜的方法，我们今天先不做研究。
灰度：
grayscale()： 值取0~1，上边提到的就是这个。
对比度：
contrast(): 取值0~1：值为0时全黑，值为1时图像不变
-webkit-filter: contrast(26%)
亮度：
brightness()
取值为0时全黑，1时无变化，大于1开始增亮
-webkit-filter: brightness(26%)
取值为0：
-webkit-filter: brightness(0)
变成200试试：
webkit-filter: brightness(200%)
饱和度：
saturate()
取值为0完全不饱和，取值为1无变化
-webkit-filter: saturate(0);
褐色：
Sepia() : 取值为0~1 ,取0时图像无变化，取1时变为全褐色。
-webkit-filter: sepia(100%);
模糊
blur(px)
值越大越模糊
耶？我眼镜儿呢？这个海绵宝宝我看不清楚了，真是高斯模糊.
-webkit-filter: blur(3px);
透明度
opacity():取值0到1之间,值越小越透明，取值为0时全透明。
-webkit-filter: opacity(20%);
反色：
invert()
-webkit-filter: invert(100%);
令人瑟瑟发抖的海绵宝宝，额，为什么海绵宝宝变成了蓝色,难不成它在海里生活太久了?看下图就明白了:
阴影效果:
drop-shadow(h-shadow v-shadow blur spread color)
前两个参数表示阴影偏移量,第一个是水平方向,正数向左,负数向右.第二个参数是竖直方向:正数向下,负数向上.第三个变量控制阴影边框的模糊度,越大越模糊,为0的时候最尖锐.第四个参数就是阴影的颜色了.
-webkit-filter:drop-shadow(10px 10px 10px #000 ) ;
