在Web页面中，CSS3的滤镜功能完全能把图片变得很惊艳。它无需额外的图片文件，且不增加页面体积，就可以达成模糊、调色、阴影和动画等效果，仅用一招就能让页面视觉提升不止一倍。滤镜属性的完整语法是filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()。现在，我们就来详细看看这12种滤镜到底能做什么。 【高斯模糊】给图片添加一层柔焦效果，参数越大画面越朦胧。举例来说，把模糊滤镜加到头像上，瞬间就能隐藏皮肤上的瑕疵。 【明暗度】原图亮度为100%，高于100%则更亮，低于100%则更暗。如果想提亮商品图的高光细节，可以将亮度设置为150%。 【对比度】调节参数使画面立体感增强。比如在人像海报中增加对比度可以让肤色看起来更加通透。 【阴影】给元素添加立体投影效果，参数分别对应水平偏移、垂直偏移、模糊半径和颜色。按钮加上柔和的灰色阴影后，层次感会更明显。 其他常用滤镜包括：灰度把图像转为黑白，色相旋转可改变颜色走向，反相反转RGB值，饱和度调节色彩鲜艳程度，深褐色一键切换胶片风，透明度控制元素不透明程度。 使用这些滤镜进行组合可以制作出更复杂的动画效果。比如下面这段代码把明暗度、对比度和深褐色做成循环动画模拟雷电的效果： 定义一个名为haunted的关键帧动画，从0%到45%保持低亮度模拟黑暗环境，在50%的时间点应用高亮度和深褐色来模拟电光一闪的过程。通过改变时间点和参数值就能让图片产生动态效果。 运用CSS3滤镜不需要额外请求资源也不增加服务器压力，可以通过一张图制作出多种效果。掌握了这些技巧后就可以在海报、动画甚至电商详情页中用少量资源换取强烈的视觉冲击。