CSS自定义变量--blur-radius可动态控制filter: blur()和backdrop-filter的模糊程度，值需带单位（如6px），推荐范围2px～10px；须按组件作用域定义，配合@supports降级，JS通过setProperty更新并节流以保性能。
用 CSS 自定义变量控制 filter: blur() 的值
直接在 filter 里写死 blur(8px) 就没法动态调整，想改模糊程度就得改 CSS 文件。用自定义变量（--blur-radius）就能在 JS 或媒体查询里实时切换，也方便做主题切换或用户偏好设置。
关键点是：变量必须用 calc() 或函数式语法包裹才能参与计算，但 blur() 不接受表达式 —— 所以得靠 var(--blur-radius) 直接插入，且值必须带单位（如 6px），不能只写数字。
-
--blur-radius: 0px表示无模糊；设为12px时模糊明显增强，但超过10px在中低端手机上可能出现掉帧 - 伪元素（如
::before）仍是推荐载体，避免影响内容层；变量定义在父容器上，子伪元素通过继承读取 - 不要把变量定义在
:root后全局覆盖所有模糊效果 —— 更稳妥的是按组件作用域定义，比如.hero-section { --blur-radius: 6px; }
backdrop-filter 能否用变量控制？可以，但有兼容性陷阱
backdrop-filter: blur(var(--blur-radius)) 在 Chrome 115+、Safari 16.4+、Firefox 119+ 中能正常工作，但 Edge 113 及更早版本会静默忽略整条声明 —— 不报错也不生效。这意味着你不能只依赖它做核心视觉逻辑。
常见错误现象：backdrop-filter 声明被浏览器 DevTools 标灰、元素背景毫无虚化效果，同时控制台无报错。这时要检查两点：是否漏写了单位，以及当前浏览器版本是否真正支持该组合用法。
- 降级方案必须存在：比如先设一个半透明
background: rgba(255, 255, 255, 0.2)，再用@supports (backdrop-filter: blur(1px))包裹模糊增强逻辑 - 变量值建议限定在
2px～10px，backdrop-filter对大值更敏感，12px在部分 Mac Safari 上会出现边缘光晕 - 若配合
position: fixed或transform使用，需确认是否意外触发了新图层，否则模糊可能作用于错误的背景层级
JS 动态更新变量实现交互式模糊范围
鼠标悬停、滚动位置、系统偏好（如减少动画）都能驱动模糊变化。用 element.style.setProperty('--blur-radius', '4px') 是最轻量的方式，比重写整个 filter 字符串更安全，也不会破坏其他滤镜（如 brightness()）。
容易踩的坑：频繁触发（如 scroll 事件）会导致变量反复写入，引发不必要的重绘。应加节流（throttle）或监听 requestAnimationFrame。
- 示例场景：导航栏随页面下拉渐进模糊，可监听
scrollY，映射为0px → 8px，再写入--blur-radius - 避免在伪元素上直接用
style.setProperty—— 它没有 DOM 节点，得操作宿主元素，伪元素自动响应变量变更 - 如果同时用了
will-change: filter，变量更新后首次模糊可能延迟一帧，这是浏览器图层合成机制导致的，属正常现象
模糊范围不是越大越好，性能和语义边界常被忽略
很多人调到 15px 还觉得“不够虚”，但实际已超出人眼对“背景隔离”的感知阈值。更大的值只会徒增 GPU 负担，尤其在 iOS Safari 上容易触发降频渲染，文字边缘发虚。
真正关键的不是绝对数值，而是模糊区域与前景内容的对比关系：比如一张人物特写背景，4px 就足以弱化干扰；而城市天际线作为背景，则可能需要 8px 才压得住细节密度。
还有一个隐形边界：当模糊层叠加在视频或 canvas 上时，filter 会强制将其提升为独立合成层，可能导致内存占用翻倍 —— 这时候与其调高 --blur-radius，不如先检查是否真有必要对动态内容做模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
