简介
CSS滤镜(filter)属性提供一系列用于制作图形特效的过滤器，比如模糊，锐化，元素变色，调整灰度等。这些过滤器可用于简单调整图片，比如背景和边界的渲染。
CSS标准内置了一些已经实现了预定义效果的函数。比如：
- blur
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
这些过滤器的使用基本语法如下：
1 | filter: <filter_funtion> | none | inherit | unset | initial; |
none表示不应用过滤器。
除特殊说明外，如过滤器函数接收的参数可以为百分比外，那么它也能接收对应小数参数。
可以同时对图片使用多个过滤器，仅需要用空格将过滤器函数隔开即可。
预览
过滤器
简单介绍内置的过滤器。
Blur
高斯模糊滤镜，用于给图像加高斯模糊效果。参数格式为CSS长度值，不接受百分比值和小数为单位。
参数越大越模糊，设置的参数足够大时，图片在视觉效果上消失。默认值为0。
例:
1 | filter: blur(5px); /* 参数为像素值 表示图像模糊半径 */ |
Brightness
明暗度滤镜，用于设置图像的明暗度。参数为小数或者对应的百分比值。
参数越小图像越黑，到1或者100%时，图像无变化，大于1时候，图像会更亮。默认值为1。
例：
1 | filter: brightness(.4); /* 参数为小数或百分比 表示图像明暗度 */ |
Contrast
对比度滤镜，用于设置图像的对比度。参数为小数或者对应的百分比值。
参数为0时，图像全黑，参数为1时，图像不变。可接受100%以上的参数，意为使用更低的对比度。
例：
1 | filter: contrast(.5); /* 参数为小数或百分比 表示图像对比度 */ |
与明暗度对比，当设置0至1范围内参数时，明暗度变现为图像会变黑，对比度会让图形整体显得灰色。当设置值特别大(比如500%)时，加明暗度滤镜的图像会大部分偏向白色的像素点不可见，而加对比度滤镜的图像会出现变色。
Drop-shadow
阴影效果滤镜，用于为图像设置阴影效果。参数与CSS3box-shadow属性类似，但是无法设置inset关键字。
阴影规则类似于box-shadow属性。
例：
1 | filter: drop-shadow(offset-x offset-y blur-radius spread-radius color); |
参数解释:
- offset-x，offset-y 必选参数 阴影偏移值 CSS长度值 可为负数和0
- spread-radius 可选参数 扩展半径 默认为0 可正可负 正值增大阴影 负值减少
- blur-raidus 可选参数 模糊半径 值越大越模糊 默认为0 不允许负值
- color 可选参数 阴影颜色 CSS颜色值
给图片添加阴影滤镜会让图片有立体感。
Grayscale
灰度滤镜，用于将图像转换成灰度图像。参数为转换的比例。
100%则转换为完全灰度头像，0则不变。默认值为0。
例：
1 | filter: grayscale(100%); /* 参数为小数或百分比，表示图像灰度比例 */ |
设置100%或1后，转为完全灰度图像，即为常说的黑白图片。
Hue-rotate
色相旋转滤镜，用于给图片加旋转效果。参数为CSS角度。
0deg和360deg效果相同。默认值为0deg，参数大于360deg后相当于旋转一周。
例：
1 | filter: hue-rotate(50deg); /* 参数为CSS角度，表示图像色相旋转角度 */ |
旋转色相会让图像呈现出怪异的颜色。
Invert
反色滤镜，用于给图像设置反色效果，参数为转换比例。
默认为0，100%时候图像完全反转。
例：
1 | filter: invert(50%); /* 参数为小数或百分比，表示图像反色程度 */ |
完全反色效果的人物图片效果显色有点恐怖。
Opacity
透明度滤镜，用于设置图像透明效果，参数为透明程度百分比。
默认值为1，设置透明度为0后，图像完全透明，视觉上不可见。
例：
1 | filter: opacity(.5); /* 参数为小数或百分比，表示图像透明程度 */ |
Saturate
饱和度滤镜，用于设置图像的饱和度。参数值为转换的比例。
默认值为100%，0表示完全不饱和，可超过100%表示更高的饱和度。
例:
1 | filter: saturate(30%); /* 参数为小数或百分比，表示图像饱和程度 */ |
饱和度为0时，图像视觉上表现为完全灰度图像。
Sepia
深褐色滤镜，用于将图像转化为深褐色。参数值为转换的比例。
可接收参数值在0至100%之间。默认值为0，表示图像无变化。100%则表示图像完全转化为深褐色。
例：
1 | filter: sepia(88%); /* 参数为小数或百分比，表示图像转化成深褐色比例 */ |
深褐色滤镜会让图片产生出一种复古的沧桑的感觉。
浏览器兼容性
非IE浏览器
