css变量不能直接用于filter函数如blur()，因变量是字符串而函数需数值；应预设完整filter值并用class切换，或用svg滤镜配合js动态控制。
filter 值不能直接用 CSS 变量动态计算
你写 --blur: 2px，再写 filter: blur(var(--blur))，浏览器会报错或失效——因为 filter 的函数值（如 blur()、contrast()）不接受纯变量，必须带单位或数字类型上下文。CSS 变量是字符串，而 blur() 期望的是一个长度值，不是字符串 "2px"。
实操建议：
- 用
filter+ 自定义属性组合时，**每个主题对应一组完整的filter值声明**，而不是拆解参数 - 避免写
filter: blur(var(--blur)) contrast(var(--contrast))—— 这在绝大多数浏览器里不工作 - 真正可行的是：为每套主题预设好整条
filter声明，通过 class 切换或 :root 覆盖
用 :root + class 切换主题 filter 更可靠
主流做法不是“动态拼 filter”，而是提前定义好几套完整值，靠类名激活对应 :root 变量，再让图片元素读取。这样既兼容性好，又不会触发解析失败。
实操建议：
- 在
:root中定义默认--image-filter: none - 给
body.dark或html[data-theme="dark"]重置--image-filter: contrast(0.8) brightness(0.9) - 图片统一写
filter: var(--image-filter)，无需 JS 干预 - 注意：IE 完全不支持
filter变量写法，如需兼容，得 fallback 到 class 直接写死
filter 性能敏感，别在动画里频繁改
filter 属于合成层触发属性，但像 blur()、drop-shadow() 会强制浏览器做离屏渲染，GPU 负担大。用 CSS 变量切换主题时，如果伴随大量图片重绘，滚动或悬停可能卡顿。
实操建议：
- 主题切换时，优先只改
body类，让所有img共享同一组filter值，避免逐个重排 - 慎用
blur(1px)以上值——哪怕只是 2px，在中低端设备上也明显掉帧 - 如果图片本身有
will-change: filter，记得主题切完后清掉，否则内存泄漏风险上升
SVG 滤镜可绕过 CSS 变量限制，但更重
真要实现“参数级动态控制”，比如滑块调 sepia() 强度，CSS 变量走不通，就得用 SVG <filter></filter> + url(#id) 引用，再配合 JS 改 <fecolormatrix></fecolormatrix> 的 values。
实操建议：
- 把 SVG
<filter></filter>内联进 HTML（不要外链），确保 DOM 就绪后能被 CSS 正确引用 - JS 控制时，改的是
filterElement.setAttribute('values', '...')，不是 CSS 变量 - 代价明显：每个动态滤镜都要一个独立 SVG 定义，DOM 膨胀快，维护成本高
- 移动端 Safari 对 SVG 滤镜的硬件加速支持不稳定，某些
feConvolveMatrix会退到 CPU 渲染
复杂点在于：你以为改个变量就能动 filter，其实浏览器底层根本不让你“算”它；真正可控的，永远是预设值 + 切换，或者绕道 SVG + JS。漏掉这点，调试半天都找不到为什么 var(--blur) 不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
