filter是现代浏览器原生视觉处理手段，对img/div/文字/视频均有效，但写法错误、顺序不当或兼容性问题会导致失效。
filter 属性不是“加特效的可选技巧”，而是现代浏览器中直接生效、无需 JS 或 Canvas 的原生视觉处理手段。它对 img、div、文字甚至视频都有效，但关键在于：写法错一点就完全没反应，组合顺序不对效果就偏移，旧版 Safari 或 IE 还会静默失效。
blur() 和 grayscale() 的基础写法与常见失效原因
最常写的两个函数是 blur(3px) 和 grayscale(100%)，但新手常卡在三处：
- 单位漏写或写错：
blur(3)在部分 Safari 版本中不认，必须带单位，如blur(3px)；grayscale(1)和grayscale(100%)都合法，但混用（比如grayscale(0.8)+blur(5px)）没问题，别自己脑补限制 - 父容器遮挡：如果元素有
overflow: hidden且未预留模糊溢出空间，blur()的边缘会被裁掉，看起来像“没模糊” - CSS 优先级覆盖：内联样式里的
filter可能被后面加载的 CSS 类覆盖，用!important是临时解法，更稳的是检查层叠顺序或改用更具体的选择器
多个滤镜组合时顺序为什么重要
滤镜按从左到右顺序逐个应用，前一个的输出是后一个的输入。比如 filter: blur(2px) grayscale(100%) 是先模糊再灰度；而 filter: grayscale(100%) blur(2px) 是先转灰再模糊——后者性能略好（灰度后像素信息变少），但视觉上差异明显：前者保留原始色彩分布再模糊，后者模糊的是已去色的图，边缘过渡更“硬”。
实际建议：
立即学习“前端免费学习笔记（深入）”；
- 做背景虚化（如毛玻璃）：用
backdrop-filter: blur(10px)，而非filter，避免影响子元素 - 图片悬停切换效果：统一用
blur(0)+grayscale(0%)归零，别混用none（filter: none会重置全部，但无法动画） - 需要动画时，只对可插值参数做过渡：
transition: filter 0.3s有效，但filter: blur(0) contrast(100%)→filter: blur(4px) contrast(80%)才能平滑，中间不能跳一个不支持动画的函数（如drop-shadow）
兼容性与降级处理的实际取舍点
Chrome/Firefox/Edge 104+、Safari 15.4+ 基本全支持，但 Safari 13–15.3 对 filter 在 position: fixed 元素上渲染异常；IE 完全不支持，连 @supports (filter: blur(1px)) 都返回 false。
稳妥做法：
- 用
@supports包裹高级效果，里面写降级样式：img { opacity: 0.9; } @supports (filter: blur(1px)) { img { filter: blur(1px); } } - 禁用态按钮用灰度，别只靠
filter：加opacity: 0.6和cursor: not-allowed，确保无滤镜环境仍可感知状态 - 性能敏感场景（如滚动区域内的大量图片），避免在
:hover外动态设置高值blur()，iOS Safari 容易掉帧；可预设类，用classList.toggle()切换
真正难的不是写出 filter: grayscale(70%) brightness(110%)，而是判断这个效果是否该由 CSS 承担、是否值得为 2% 的旧设备用户放弃它、以及当模糊边缘被裁掉时，第一反应是调 padding 还是改 transform: translateZ(0) 触发硬件加速——这些细节才决定最终体验是否自然。
