CSSfilter属性将模糊或者颜色偏移等图像效果用于元素，通常用于调整图像，背景和边框的渲染，css标准中已内置一些预定义效果的函数，也可通过url使用SVG滤镜。
CSSfilter属性语法
/*URLtoSVGfilter*/
filter:url(filter.svg#id);
/*<filter-function>values*/
filter:blur(5px);
filter:brightness(0.4);
filter:contrast(200%);
filter:drop-shadow(16px16px20pxblue);
filter:grayscale(50%);
filter:hue-rotate(90deg);
filter:invert(75%);
filter:opacity(25%);
filter:saturate(30%);
filter:sepia(60%);
/*Multiplefilters*/
filter:contrast(175%)brightness(3%);
/*Globalvalues*/
filter:inherit;
filter:initial;
filter:unset;
CSSfilter滤镜属性
需要设定某一函数的值。如果该值无效，函数返回“none“。
url()
url函数接收一个XML文件，该文件是一个SVGfilter，并且包含一个ID值来指定哪一个滤镜
filter:url(resources.svg#c1)
blur()
定义模糊度
可以接受css长度单位，不接受百分比
filter:blur(5px)
brightness()
定义亮度
默认为1，1-0逐渐变暗，1以上逐渐变亮
可以是百分比，不能为负数
contrast()
定义对比度
1-0逐渐变成灰黑1以上颜色逐渐变艳丽
可以是百分比，不能为负数
drop-shadow()
总之，CSSfilter属性定义阴影效果，合成在图像下面，参数和shadow,box-shadow相似和shadow,box-shadow属性不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。