filter: blur(var(--blur))失效的根本原因是--blur值类型不合法：blur()必须接收带单位的长度值（如4px），不能是纯数字4或字符串"4px"；变量需定义为--blur: 4px才有效。
能，但必须严格匹配单位与函数要求，否则整个 filter 声明会静默失效——浏览器不报错，图片也不变。
为什么 filter: blur(var(--blur)) 有时没反应
根本原因不是变量没生效，而是 --blur 的值类型不合法：blur() 必须接收带单位的长度值（如 4px），不能是纯数字 4，也不能是字符串 "4px"。一旦单位缺失或包裹错误，整条 filter 规则会被浏览器丢弃。
-
--blur: 4px✅ 正确：变量本身含单位，blur(var(--blur))可直接用 -
--blur: 4❌ 失效：无单位数字，blur()拒绝解析 -
--blur: "4px"❌ 失效：字符串，不是可计算长度 -
blur(calc(var(--blur) * 1px))⚠️ 不推荐：Safari 可能拒绝解析，且增加不必要的计算开销
brightness、grayscale 等无单位函数怎么设变量
这类函数接受数值（0–1）或百分比（0%–100%），变量定义更灵活，但混用格式容易引发滑块联动错乱：
-
--brightness: 1.2和--brightness: 120%都合法，但不要在不同地方混用——比如一个滑块输出1.2，另一个输出120%，会导致 CSS 解析不一致 -
--grayscale: 0.7表示 70% 灰度，--grayscale: 70%效果相同，但建议统一用小数（0–1 范围），便于 JS 计算和范围限制 -
drop-shadow是例外：它接受完整字符串值，应直接存为--drop-shadow: "0 4px 8px rgba(0,0,0,0.2)"，CSS 中写filter: drop-shadow(var(--drop-shadow))
JS 更新多个滤镜变量时怎么避免覆盖和竞态
多个滑块同时拖动时，频繁调用 element.style.setProperty() 会导致中间值丢失——浏览器只记住最后一次设置。正确做法是集中更新、批量提交：
- 所有滑块的
input事件只触发一次requestAnimationFrame(updateVars)，确保同帧内执行 -
updateVars函数统一从dataset读取当前值（如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: blur(1px))包裹变量版规则；不支持时，回退到静态 class 控制（如.blur-2对应filter: blur(2px)） - 注意：不能靠
try/catch捕获，因为语法本身合法，只是浏览器选择性忽略
最易被忽略的是滤镜叠加顺序——CSS 变量不改变执行逻辑，filter: blur(var(--b)) grayscale(var(--g)) 和 filter: grayscale(var(--g)) blur(var(--b)) 效果完全不同，前者先灰度再模糊，后者先模糊再灰度，边缘表现差异显著。顺序必须在 CSS 中显式写死，不能靠 JS 动态拼接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
