真正可行的方案是把每个参数抽成 CSS 变量，在 CSS 里统一组合 filter 值，因直接用 style.filter 拼字符串会覆盖全值、无法过渡、破坏级联、调试复用困难，且滤镜顺序敏感、单位需严格匹配，Safari 旧版需 JS fallback，变量更新须批量防抖并确保元素显式引用。
直接用 style.filter 拼字符串做多滤镜控制，后期维护难、无法过渡、容易覆盖失效——真正可行的方案是把每个参数抽成 CSS 变量，在 CSS 里统一组合 filter 值。
为什么不能直接用 JS 设置 style.filter？
每次 img.style.filter = `blur(${v}px) brightness(${b})` 都会覆盖整个属性值，多个滑块并发更新时极易丢失某一项；且浏览器无法对字符串形式的 filter 做原生 transition 或 will-change 优化。更关键的是：它绕过了 CSS 的级联与作用域机制，后续调试和复用成本陡增。
filter 组合必须按顺序声明，变量也要对齐函数顺序
CSS 滤镜执行是严格从左到右的流水线，grayscale(1) saturate(0) 和 saturate(0) grayscale(1) 渲染结果完全不同。变量本身无序，但你在 CSS 里写的表达式顺序决定了最终效果。
- 正确写法：
filter: grayscale(var(--grayscale)) saturate(var(--saturate)) brightness(var(--brightness)); - 错误写法：在不同地方分别写
filter: grayscale(...);和filter: saturate(...);—— 后者会完全覆盖前者 - 所有变量（如
--grayscale、--saturate）需定义在同一作用域（推荐:root），避免嵌套层级中被意外覆盖
单位必须匹配函数要求，混用易失效
blur() 要像素单位，brightness() 和 contrast() 接受无单位数值或百分比，grayscale() 接受 0–1 小数或 0%–100% —— 但混用会导致行为不一致，尤其在 Safari 中。
- 推荐统一用无单位小数：
--grayscale: 0.7;→grayscale(var(--grayscale)) -
--blur: 3px;→blur(var(--blur))（px不能省） -
--brightness: 1.2;→brightness(var(--brightness))（不要写成120%） - Safari 15.4 之前不支持
filter内直接用var()，需 JS fallback 或降级提示
JS 更新变量要批量、防抖、带作用域
监听多个滑块的 input 事件时，频繁调用 setProperty 会造成样式重算抖动，且并发修改可能乱序。
- 用
requestAnimationFrame批量收集并提交：updateVars函数只在下一帧执行一次 - 滑块值存在元素
dataset里（如data-blur="3"），统一读取再写入document.documentElement.style - 避免用
cssText或setAttribute('style', ...)，会清空已有内联样式 - 局部控制可改容器节点的
style.setProperty，但需确保该容器在 CSS 中有对应选择器引用变量
最易被忽略的一点：CSS 变量变更本身不触发重绘，必须确保目标元素上显式声明了 filter: ... var(--x) ...，且该声明能实时读取变量值——父级定义变量 + 子元素没写 filter，图片照样不会变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
