filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
取值：
| none |
无SVG滤镜效果。 |
| blur(<number>px) |
设置对象的模糊效果。 |
| brightness(<percentage>) |
设置对象的亮度。除了百分比外，也可以用非负数表达。 |
| contrast(<percentage>) |
设置对象的对比度。除了百分比外，也可以用0-1的数字表达。 |
| grayscale(<percentage>) |
设置对象的灰度。除了百分比外，也可以用0-1的数字表达。 |
| hue-rotate(<number>deg) |
设置对象的色相旋转。用0-360数字表达。 |
| invert(<percentage>) |
设置对象的反色。除了百分比外，也可以用0-1的数字表达。 |
| opacity(<percentage>) |
设置对象的透明度。除了百分比外，也可以用0-1的数字表达。 |
| saturate(<percentage>) |
设置对象的饱和度。除了百分比外，也可以用非负数表达。 |
| sepia(<percentage>) |
设置对象的褐色程度。除了百分比外，也可以用0-1的数字表达。 |
| drop-shadow(<length①> <length②> radius <color>) |
设置对象的阴影。第一个长度是向右偏移距离，第二个长度是向下偏移距离，皆可为负值，皆为必传参数；第三个是阴影圆角，可选；第四个是阴影颜色，可选。 |
| url(path.svg#a) |
设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里，也可外部引用。可增加锚节点。 |
