css3属性 -webkit-filter用法

• 说明
  CSS滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。
• 语法
  -webkit-filter:none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | saturate() | sepia() | drop-shadow( radius )| url()
  默认值：none
• 取值
  none 无SVG滤镜效果。
  blur(px) 设置对象的模糊效果。
  brightness() 设置对象的亮度。除了百分比外，也可以用非负数表达。
  contrast() 设置对象的对比度。除了百分比外，也可以用0-1的数字表达。
  grayscale() 设置对象的灰度。除了百分比外，也可以用0-1的数字表达。
  hue-rotate(deg) 设置对象的色相旋转。用0-360数字表达。
  invert() 设置对象的反色。除了百分比外，也可以用0-1的数字表达。
  opacity() 设置对象的透明度。除了百分比外，也可以用0-1的数字表达。
  saturate() 设置对象的饱和度。除了百分比外，也可以用非负数表达。
  sepia() 设置对象的褐色程度。除了百分比外，也可以用0-1的数字表达。
  drop-shadow(<length①> <length②> radius ) 设置对象的阴影。第一个长度是向右偏移距离，第二个长度是向下偏移距离，皆可为负值，皆为必传参数；第三个是阴影圆角，可选；第四个是阴影颜色，可选。
  url(path.svg#a) 设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里，也可外部引用。可增加锚节点。
• 浏览器支持
  
  注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
• 实例
  
  模糊：-webkit-filter:none;
  
  灰度：-webkit-filter:grayscale(0.8);
  
  亮度-webkit-filter:brightness(0.8);
  
  对比度-webkit-filter:contrast(3.0);
  
  饱和度-webkit-filter:saturate(5.0);
  
  色相旋转-webkit-filter:hue-rotate(200deg);
  
  反色-webkit-filter:invert(0.7);
  
  阴影-webkit-filter:drop-shadow(10px 10px 10px #000);
  
  原图-webkit-filter:none;