CSS3新增的filter属性为前端开发者提供了原生的元素视觉效果处理能力，通过简单的属性设置就能实现模糊、灰度、对比度调整等多种滤镜效果，大幅降低了页面视觉优化的成本。该属性支持对几乎所有可见的HTML元素生效，包括图片、文字、容器等，适配现代主流浏览器。
CSS3滤镜核心特性说明
CSS3的filter属性属于视觉效果类属性，其值为一个或多个滤镜函数组成的列表，多个滤镜之间用空格分隔，会按照顺序依次作用于目标元素。所有滤镜函数都接收数值参数，部分参数支持百分比形式，超出有效范围的数值会被浏览器自动截断到合法区间。
常用的滤镜函数可以分为以下几类：
- 模糊类：
blur()，用于给元素添加高斯模糊效果 - 颜色调整类：
grayscale()、sepia()、saturate()、hue-rotate()，分别用于灰度、复古棕、饱和度、色相调整 - 明暗对比类：
brightness()、contrast()、invert()、opacity()，用于调整亮度、对比度、反色、透明度 - 阴影类：
drop-shadow()，用于给元素添加符合自身轮廓的阴影
常见滤镜效果实现示例
1. 模糊滤镜
blur()函数接收一个长度值作为参数，数值越大模糊程度越高，默认值为0，不模糊。示例如下：
/* 给图片添加5px的高斯模糊 */
.blur-img {
filter: blur(5px);
}
/* 鼠标悬停时取消模糊效果 */
.blur-img:hover {
filter: blur(0);
}
2. 灰度滤镜
grayscale()函数接收0到1之间的数值或0%到100%的百分比作为参数，0表示完全彩色，1或100%表示完全灰度。示例如下：
/* 让元素完全显示为灰度 */
.grayscale-full {
filter: grayscale(100%);
}
/* 让元素显示为50%灰度 */
.grayscale-half {
filter: grayscale(0.5);
}
3. 对比度调整
contrast()函数接收大于等于0的数值或百分比，1或100%为原始对比度，小于1则对比度降低，大于1则对比度升高。示例如下：
/* 将元素对比度提升到1.5倍 */
.high-contrast {
filter: contrast(1.5);
}
/* 降低元素对比度到50% */
.low-contrast {
filter: contrast(50%);
}
4. 多滤镜组合使用
多个滤镜函数可以并列写在filter属性中，按顺序生效。示例如下：
/* 同时应用模糊和灰度效果 */
.combo-filter {
filter: blur(2px) grayscale(80%);
}
滤镜效果的实际应用注意事项
首先，filter属性会触发元素的硬件加速，大量使用或给频繁变动的元素添加滤镜可能会影响页面性能，建议只在必要的元素上使用，且避免给滚动、动画中的大量元素同时添加复杂滤镜。
其次，部分旧版本浏览器对filter属性的支持存在前缀差异，如果需要兼容旧版浏览器，可以添加-webkit-filter等前缀属性。同时filter属性对SVG元素的支持情况也存在差异，使用时需要提前测试目标浏览器的兼容性。
最后，filter属性生成的效果不会影响元素自身的布局空间，只会改变视觉呈现，这一点和opacity属性的表现一致，开发中不需要额外调整元素的布局属性。