<p>必须用 CSS 变量配合 calc() 实现动态模糊，如 backdrop-filter: blur(calc(var(--blur-value) * 1px))，且 --blur-value 需为纯数字；直接写 blur(var(--blur-value)) 会因语法限制失效。</p>
如何用 CSS 自定义属性控制 backdrop-filter: blur() 的模糊度
直接在 backdrop-filter 里写死 blur(12px) 是最常见也最僵硬的做法。想动态调模糊度（比如滑块调节、主题切换、响应式降级），必须把数值抽成 CSS 变量，但变量不能直接塞进函数参数里——得靠 calc() 或预设值映射。
-
blur()不接受变量插值，backdrop-filter: blur(var(--blur-value))会直接失效（浏览器解析失败，整条声明被丢弃） - 正确做法是用
calc()包一层：backdrop-filter: blur(calc(var(--blur-value) * 1px))，前提是--blur-value是纯数字（如12），不是带单位的字符串（如"12px"） - 更稳妥的是预设几档模糊值，用 class 切换：
.glass-sm { --blur: 4; }+backdrop-filter: blur(calc(var(--blur) * 1px)) - 别在 :root 里写
--blur: 12px——单位参与 calc 会报错；统一存数字，单位在 calc 里补
为什么 var(--blur) 直接进 blur() 会失效
这不是浏览器 bug，是 CSS 函数语法限制：blur() 的参数必须是可解析的长度值（<length>），而未计算的自定义属性属于 <custom-ident> 或 <string> 类型，无法在函数上下文中自动转换。
- Chrome / Safari 会静默忽略整条
backdrop-filter声明，开发者工具里显示为“invalid value” - Firefox 虽不支持
backdrop-filter，但同样会报Invalid property value警告 - 验证方式：打开 DevTools → Elements → 找到元素 → 看
backdrop-filter是否被划掉或标红
配合深色模式与用户偏好做多档模糊适配
模糊度不是越强越好，不同场景需要不同强度：导航栏要通透不抢眼，模态框遮罩需弱化背景干扰，而卡片浮层可以稍强。用媒体查询 + 自定义属性组合能自然过渡。
- 基础档（默认）：
:root { --blur-base: 8; }→blur(calc(var(--blur-base) * 1px)) - 深色模式下降低饱和度影响，可同步微调模糊：
@media (prefers-color-scheme: dark) { :root { --blur-base: 6; } } - 用户关闭动画偏好时主动降级：
@media (prefers-reduced-motion: reduce) { :root { --blur-base: 0; } }（注意：设为0仍触发合成层，不如用 class 移除整个声明） - 移动端小屏建议最大不超过
--blur-base: 10，否则文字边缘发虚明显，尤其在非 Retina 屏上
容易被忽略的性能陷阱：变量更新 ≠ 滤镜重绘
改 --blur-value 的值本身不触发重排，但每次变更都会强制浏览器重新合成 backdrop 渲染层——频繁修改（如拖动滑块实时响应）会导致 GPU 压力陡增，iOS 上极易卡顿。
立即学习“前端免费学习笔记（深入）”；
- 避免用
input[type="range"]的input事件直接改变量；改用change事件或防抖（如 60ms） - 不要在滚动监听里动态算模糊度：
backdrop-filter和transform同属高成本属性，叠加使用掉帧风险翻倍 - 测试时重点关注 iOS 16.5 以下 Safari —— 这些设备对
calc()+ 变量的 backdrop 更新特别敏感，模糊值跳变时可能出现残影或白块 - 真要动态模糊，优先考虑 class 切换预设值（
.glass-4px/.glass-8px），比运行时计算更稳
