CSS3 filter 滤镜效果

filter: grayscale(1);  /*灰度，取值范围0-1，此处表示100%灰度（灰色）*/
filter: sepia(0.5);  /*叠加褐色，取值范围0-1，此处表示50%的褐色*/
filter: brightness(0.5);  /*亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片）*/
filter: hue-rotate(30deg);  /*色相（按照色相环进行旋转，顺时针方向，红-绿-蓝-红）此处为叠加黄色滤镜*/
filter: invert(1);  /*反色，取值范围0-1，0为原图，1为彻底反色之后，0.5为灰色*/
filter: saturate(4);  /*饱和度，取值范围0~*，0为无饱和度，1为原图，值越高饱和度越大*/
filter: contrast(2);  /*对比度，取值范围0~*，0为无对比度（灰色），1为原图，值越高对比度越大*/
filter: opacity(0.8);  /*透明度，取值范围0~1，0为全透明，1为原图*/
filter: blur(5px);  /*模糊，此处为5像素*/
filter: drop-shadow(17px 17px 20px black);  /*阴影*/