filter 中使用 CSS 变量需满足三点：变量自带单位（如 --blur: 4px）、filter 声明中空格拼接、仅 Safari 15.4+ 支持；drop-shadow 需字符串变量；brightness 等无单位函数建议统一用小数；JS 更新应防竞态，用 requestAnimationFrame 统一设置；旧版 Safari 需 @supports 检测并降级。
filter: blur(var(--blur)) 这类写法常静默失效，不是 JS 没改对，而是变量值类型不合法或浏览器不支持——必须同时满足「单位内置于变量」「整条 filter 声明中空格拼接」「Safari 15.4+ 才真正可用」这三点，否则图片毫无反应。
blur()、drop-shadow() 等带单位函数怎么设变量
这些函数拒绝纯数字或字符串，只接受合法长度值（如 4px）。变量必须自带单位，不能靠 calc() 补，也不能在 CSS 里再加单位。
-
--blur: 4px✅ 正确：直接blur(var(--blur))可用 -
--blur: 4❌ 失效：无单位，blur(4)非法 -
--blur: "4px"❌ 失效：字符串不是可计算长度 -
blur(calc(var(--blur) * 1px))⚠️ 不推荐：Safari 旧版可能解析失败，且多一层计算无必要 -
drop-shadow是例外：它接收完整字符串，应定义为--drop-shadow: "0 4px 8px rgba(0,0,0,0.2)"，CSS 中写drop-shadow(var(--drop-shadow))
brightness、grayscale 等无单位函数的变量写法
它们接受数值（0–1）或百分比（0%–100%），但混用格式会导致滑块联动错乱，尤其 JS 动态读取时。
-
--brightness: 1.2和--brightness: 120%都合法，但建议统一用小数（0–1或0–3范围），便于 JS 计算和范围限制 -
--grayscale: 0.7表示 70% 灰度，--grayscale: 70%效果相同，但不要一个地方用0.7、另一个用70% - 别写成
brightness(var(--bright)%)—— 单位不能拆到函数外，会直接失效
JS 更新多个滤镜变量时怎么避免覆盖和竞态
多个滑块同时拖动时，频繁调用 element.style.setProperty() 会让中间值丢失，浏览器只记住最后一次。
立即学习“前端免费学习笔记（深入）”；
- 所有滑块的
input事件只触发一次requestAnimationFrame(updateVars)，确保同帧执行 -
updateVars函数统一从dataset.value读当前值（如blurSlider.dataset.value），而非实时.value（可能未提交） - 集中调用
document.documentElement.style.setProperty()，顺序固定、无竞态，且保证全局生效 - 绝对不要操作
element.style.filter—— 这会覆盖掉你用 CSS 变量写的整条声明
Safari 15.4 之前不支持 filter 中使用 var() 怎么降级
这不是 bug，是规范实现进度问题。Safari 15.4 之前遇到 filter: blur(var(--blur)) 会直接忽略整条声明，图片显示原始状态，控制台无任何提示。
- 检测方法：
getComputedStyle(el).filter返回空字符串或原始值（非计算后结果），说明不支持 - 降级方案必须做：
@supports (filter: var(--f)) { }包裹变量版，再写一层 fallback，例如用 class 切换预设好的完整filter值 - 对
drop-shadow同样无效，得用完整字符串变量 + fallback 类名 - 别指望
@supports not (filter: var(--f))自动兜底——部分旧 Safari 甚至不识别这个语法，稳妥做法是 JS 主动检测后加 class
最易被忽略的一点：滤镜叠加顺序完全由你在 CSS 中写的函数排列决定，变量本身不参与排序。写成 grayscale(var(--gray)) blur(var(--blur)) 和 blur(var(--blur)) grayscale(var(--gray)) 效果截然不同，且无法靠 JS “自动对齐”。
