直接给 img 加 filter 最稳，但需避开 overflow 截断、层叠上下文隔离、单位混用三类失效点；常见失效原因包括父容器 overflow: hidden 裁剪、transform 等创建层叠上下文、图片未加载完就设 filter。
直接给 img 元素加 filter 是最稳的起点，但必须绕开 overflow 截断、层叠上下文隔离、单位混用这三类高频失效点。
为什么图片加了 filter 却没反应？
不是代码写错了，而是浏览器根本没让滤镜“作用到像素上”。常见原因有：
-
overflow: hidden父容器会硬裁掉 blur 或 drop-shadow 的溢出像素，哪怕只设blur(0.5px)也立刻消失 - 父级用了
transform、opacity: 0.99、will-change或position: fixed，会创建层叠上下文，把filter锁死在父容器快照内 - 图片还没加载完成（
onload前）就设置filter，部分浏览器会跳过渲染
排查时临时加 margin: 2px 或设父容器 overflow: visible，能快速验证是不是裁剪问题。
响应式场景下怎么避免媒体查询导致的闪烁和卡顿？
别在 @media 里直接改 filter 值。浏览器重绘开销大，缩放瞬间容易闪白或延迟生效。
- 统一用 CSS 自定义属性：在
:root定义--f-blur: 0;、--f-contrast: 1; - 媒体查询只更新变量值：
@media (max-width: 768px) { :root { --f-blur: 1px; --f-contrast: 0.9; } } -
img样式始终写成：filter: blur(var(--f-blur)) contrast(var(--f-contrast)); - 所有单位保持一致：
blur()必须是px，brightness()和contrast()统一用小数（如1.2），不混用120%
移动端和旧浏览器兼容性怎么兜底？
filter 在 iOS Safari 9+、Chrome Android 50+、Firefox 35+ 原生支持良好，但 IE 完全不认，Android 4.x 也弱。需要降级策略：
- 优先检测原生支持：
@supports (filter: blur(1px))包裹主样式 - 对不支持环境，用
CSS-Filters-Polyfill库接管：element.style.polyfilter = 'sepia(0.8) brightness(1.1)'; - 避免在移动端滥用
drop-shadow()或多层叠加（如blur(2px) contrast(1.3) saturate(1.5)），GPU 压力大，低端机易掉帧 - 高清屏（
dpr > 1）下，blur(1px)实际模糊半径可能偏弱，可按calc(var(--f-blur) * 2)动态放大
动态滑块控制滤镜时最容易崩在哪？
不是逻辑错，是字符串拼接方式错了。每次滑块拖动，必须重生成完整 filter 字符串，不能用 += 追加。
- 错误写法：
el.style.filter += ' blur(' + val + 'px)';—— 上次值残留，顺序错乱，单位丢失都可能发生 - 正确写法：收集所有控件当前值，拼出完整串：
el.style.filter = `blur(${blurVal}px) contrast(${contrastVal}) saturate(${satVal})`; - 函数顺序有影响：
blur()放最后，grayscale()或sepia()放最前，drop-shadow()必须压轴 - 空值要显式处理：如果某个滑块归零，不能留
blur(0)（漏单位），而应剔除该函数，或写成blur(0px)
真正难的从来不是写对一行 filter，而是确保它在各种容器嵌套、加载时机、设备缩放、DPR 变化下依然稳定可见——这些细节不手动测几轮真发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
