CSS的filter属性提供了一组可以直接作用在元素上的图形处理函数，常用于图片、背景以及任意DOM节点的视觉效果调整。它不需要借助图片处理软件，也不依赖JavaScript，仅通过样式声明就能改变元素的渲染结果。
filter常用函数与效果
filter属性接收一个或多个函数，函数之间用空格分隔。下面列出开发中最常用的几种：
- blur()：高斯模糊，让元素变虚
- brightness()：调整亮度，大于1变亮，小于1变暗
- contrast()：调整对比度
- grayscale()：灰度化，0到1之间取值
- sepia()：褐色复古效果
- invert()：反色
- opacity()：透明度
- drop-shadow()：生成阴影，与box-shadow不同，它跟随元素形状
基础代码示例
以下代码演示了如何给一张图片同时添加模糊和亮度调整：
.img-demo {
/* 模糊2px，亮度提升到1.2倍 */
filter: blur(2px) brightness(1.2);
}
应用案例一：图片悬停高亮
在相册列表中，默认图片稍暗，鼠标移上去变清晰且加饱和，是很常见的交互。
<style>
.photo {
filter: brightness(0.8) saturate(1);
transition: filter 0.3s;
}
.photo:hover {
filter: brightness(1.1) saturate(1.4);
}
</style>
<img class="photo" src="https://ipipp.com/demo.jpg" alt="示例">
应用案例二：背景虚化突出内容
使用blur()处理底层背景图，可以让前景文字更容易阅读。
.bg {
background: url(https://ipipp.com/bg.png);
filter: blur(5px);
}
应用案例三：灰度与反色切换
有些网站在节日或暗黑模式中会使用invert()快速反色，或用grayscale()做哀悼效果。
.mourn-mode img {
filter: grayscale(1);
}
注意事项
filter会影响元素的最终绘制，过度使用可能导致性能问题，尤其在移动端。另外，使用drop-shadow()时，阴影形状取决于元素本身的不透明区域，而不是边框盒子。
如果只需要矩形阴影，box-shadow比drop-shadow性能更好；若元素是不规则透明png，drop-shadow更合适。
小结
通过合理组合filter函数，可以用纯CSS完成以往需要图片软件或Canvas才能实现的效果。掌握这些函数后，就能在按钮、卡片、图片墙等场景中灵活提升视觉表现。