filter: blur(var(--blur)) 常无效是因为变量值必须带单位（如4px）、浏览器需支持css变量在filter中使用、且声明顺序正确；safari 15.4前需@supports降级。
直接用 filter: blur(var(--blur)) 大概率没反应——不是 JS 没改对，而是变量值类型、浏览器支持、声明顺序三者中任一不满足，整条 filter 就会被静默丢弃。
为什么 filter: blur(var(--blur)) 常常不动？
blur() 函数只接受合法长度值（如 4px），不接受纯数字 4 或字符串 "4px"。浏览器解析时把 var(--blur) 当作未计算字符串，一旦值类型非法，整条 filter 声明直接跳过，控制台零提示。
-
--blur: 4px✅ 正确：单位内置于变量，blur(var(--blur))可直接用 -
--blur: 4❌ 失效：无单位，blur(4)非法 -
--blur: "4px"❌ 失效：字符串不是可计算长度 -
blur(calc(var(--blur) * 1px))⚠️ 不推荐：Safari 旧版可能拒绝解析，且无必要增加计算
drop-shadow 和无单位函数的变量写法差异
drop-shadow() 是例外，它接收完整字符串；而 brightness、grayscale 等接受数值或百分比，但混用格式会引发滑块联动错乱。
-
--drop-shadow: "0 4px 8px rgba(0,0,0,0.2)"→ CSS 中写drop-shadow(var(--drop-shadow)) -
--brightness: 1.2和--brightness: 120%都合法，但建议统一用小数（0–3 范围），便于 JS 限制范围和计算 - 别写成
brightness(var(--bright)%)—— 单位不能拆到函数外，会直接失效 -
--grayscale: 0.7表示 70%，与--grayscale: 70%效果相同，但不要交叉使用
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 之前必须降级，否则图片显示原始状态
这不是 bug，是规范实现进度问题。Safari 15.4 之前遇到 filter: blur(var(--blur)) 会直接忽略整条声明，图片毫无变化，且控制台无任何提示。
- 检测方法：
getComputedStyle(el).filter返回空字符串或原始值（非计算后结果），说明不支持 - 降级方案必须用
@supports (filter: var(--f))包裹变量版，再写一层 fallback，例如用 class 切换预设好的完整filter值 - 旧版 Safari 下，
drop-shadow(var(--shadow))同样无效，得靠完整字符串变量 + fallback 类名 - 滤镜叠加顺序（如
grayscale在前还是blur在前）在降级时也需手动维护，变量本身不带执行顺序
最易被忽略的是：变量定义位置、滤镜组合的单条声明、以及 Safari 旧版下 @supports 的包裹粒度——漏掉任意一项，用户看到的就是一张没反应的图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
