具体的使用方式如下：
/* 语法 */
filter: none | <filter-function> | <url-filter>;
/* 示例 */
.element {
filter: grayscale(50%); /* 将元素呈现为50%的灰度 */
}
.image {
filter: blur(5px); /* 对图像应用5像素的模糊效果 */
}
/* 多个滤镜叠加 */
.box {
filter: grayscale(50%) blur(5px) brightness(120%); /* 多个滤镜叠加 */
}
常见的 <filter-function> 包括：
- blur(): 对元素进行模糊处理。
- brightness(): 调整元素的亮度。
- contrast(): 调整元素的对比度。
- grayscale(): 将元素呈现为灰度。
- hue-rotate(): 旋转元素的色相。
- invert(): 反转元素的颜色。
- opacity(): 调整元素的透明度。
- saturate(): 调整元素的饱和度。
- sepia(): 将元素呈现为深褐色。
你还可以使用 <url-filter> 指定一个 SVG 文件作为滤镜，但这较为复杂，一般使用内置的滤镜函数更为方便。
这些滤镜可以单独应用，也可以组合使用，实现更复杂的效果。请注意，滤镜属性在一些较老版本的浏览器中可能不被完全支持，因此在使用时要考虑浏览器的兼容性。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6064/CSS