起初不了解CSS滤镜，即便后来知道了也从未尝试。今天闲来无事动手测试一番，没想到效果令人惊叹，原来CSS3的filter功能如此强大，远超想象。
1、 模糊效果，如：-webkit-filter: blur(2px); 可使元素产生2像素的模糊。
2、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
3、 亮度用于调节图像明暗程度，例如使用CSS属性 -webkit-filter: brightness(25%) 可将画面调暗至25%的亮度。
4、 原图在左，经同一图片滤镜处理后效果在右。
5、 对比度用于调整图像的明暗差异，例如使用CSS属性-webkit-filter:contrast(50%)可将图像对比度设置为50%。
6、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
7、 drop-shadow 是一种添加阴影效果的滤镜，例如：-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5)); 可为元素创建水平偏移、垂直偏移、模糊半径及颜色透明度设定的投影效果。
8、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
9、 透明度用于调节元素的不透明程度，例如使用-webkit-filter:opacity(50%)可设置元素半透明效果。
10、 左侧为原图，右侧是同一张图片应用滤镜后的效果。
11、 将图像转换为灰度效果，例如使用CSS属性：-webkit-filter: grayscale(80%); 可调整灰度百分比实现不同程度的去色。
12、 左侧为原图，右侧为同一图片应用滤镜后的效果。
13、 褐色滤镜效果，示例：-webkit-filter:sepia(100%); 可将图像呈现复古棕色调。
14、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
15、 反色效果，如使用 -webkit-filter: invert(100%) 实现图像颜色反转。
16、 左侧为原始图像，右侧是同一图片应用滤镜后的效果。
17、 色相旋转，用于调整图像颜色的色调。例如：-webkit-filter: hue-rotate(180deg); 可将颜色反转。
18、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
19、 调整图像色彩的饱和程度，例如使用 saturate(50%) 可将颜色饱和度降低一半。
20、 左侧为原始图像，右侧为同一图片应用滤镜后的效果。
21、 以上十种CSS3滤镜效果，快来动手尝试吧！
