filter: blur(var(--blur)) 失效是因为 css 变量在 filter 函数中被当字符串处理，--blur 必须定义为带单位的值（如 4px），且需全局定义、元素自身声明 filter 并正确叠加顺序，safari 旧版需降级 fallback。
直接用 filter: blur(var(--blur)) 之类写法，浏览器大概率不生效——不是 JS 没改对，而是 CSS 变量在 filter 函数里被当作字符串处理，而函数要的是带单位的值或合法数值。
为什么 filter: blur(var(--blur)) 常常静默失效
浏览器解析 filter 时，会把 var(--blur) 当作未求值的字符串。如果 --blur 定义为 "4" 或 4（无单位），blur("4") 或 blur(4) 都非法，整条 filter 声明会被丢弃，控制台不报错，图片也不变。
-
--blur必须定义为带单位的值，例如--blur: 4px，且在 CSS 中写成blur(var(--blur))（单位已包含在变量中） -
--grayscale、--contrast这类接受无单位数值的函数，变量可写--grayscale: 0.7，但不能混用70%和0.7，否则滑块联动易错乱 - 别用
calc(var(--blur) * 1px)补单位——Safari 可能拒绝解析，尤其旧版本
JS 更新多个滤镜变量必须批量、同帧、顺序固定
多个滑块（模糊、亮度、饱和度）同时拖动时，逐个调用 element.style.setProperty() 会导致竞态：后一次覆盖前一次，中间值丢失。
- 所有滑块监听
input事件，但只触发一次requestAnimationFrame(updateVars) -
updateVars函数统一读取各滑块的dataset.value（而非实时.value），再集中调用document.documentElement.style.setProperty() - 避免用
cssText或setAttribute('style', ...)，会清空已有内联样式 - 变量优先定义在
:root，确保全局可继承；局部容器需显式声明--blur才能生效
滤镜叠加顺序和 Safari 兼容性是两个硬门槛
filter 是从左到右执行的：grayscale(1) saturate(0) 和 saturate(0) grayscale(1) 效果不同。而 iOS 15.4 之前 Safari 根本不支持 filter 中使用 var() ——它会静默忽略整条声明，图片显示原始状态。
- 固定组合写法：
filter: grayscale(var(--grayscale)) saturate(var(--saturate)) brightness(var(--brightness));，不要拆成多条filter声明 - 检测是否支持：
getComputedStyle(el).filter返回空字符串或原始值（非计算后结果），说明不支持变量 - 降级方案必须做：
@supports (filter: var(--f)) { ... }包裹变量版，再写一层 fallback，例如用 class 切换预设好的完整filter值 - Safari 旧版下，
drop-shadow(var(--shadow))也无效，得用完整字符串变量 + fallback 类名
最易被忽略的点：变量改了但图片没反应，90% 是因为元素自身没声明 filter，只靠父级定义了变量；或者用了 filter: grayscale(0.5) 这种固定值，压根没接 var()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
