直接写 filter: blur(var(--blur)) 失效是因为 --blur 必须定义为带单位的值（如 4px），若为无单位数字或带引号字符串则静默失效；所有滤镜需在同一 filter 声明中空格分隔，变量更新须用 dataset + requestAnimationFrame 批量设置，避免覆盖与竞态。
为什么直接写 filter: blur(var(--blur)) 会失效
浏览器把 --blur 当作字符串，而 blur() 函数需要的是带单位的长度值（如 4px），不是字符串 "4px"。所以你写 filter: blur(var(--blur)) 且 --blur: 4px 是可行的；但若写成 --blur: 4 或 --blur: "4px"，整个 filter 就会静默丢弃——控制台不报错，图片也不模糊。
-
--blur、--drop-shadow这类带单位的变量，必须在定义时就包含单位：--blur: 2px，不能靠calc()补单位（blur(calc(var(--blur) * 1px))不稳定，Safari 可能拒绝解析） -
brightness、contrast、grayscale等接受无单位数值，可写--brightness: 1.2或--brightness: 120%，但混用（比如一个地方用1.2，另一个用120%）容易导致滑块联动错乱 - 别在同一个 CSS 规则里拆开写多个
filter声明，例如：filter: blur(var(--blur)); filter: brightness(var(--bright));—— 后者会完全覆盖前者
如何安全地用 JS 更新多个滤镜变量
多个滑块（比如模糊、亮度、饱和度）同时拖动时，element.style.setProperty() 调用若没节流，会导致变量更新乱序或丢失。比如亮度滑块刚设为 1.3，模糊滑块紧接着设为 0px，但浏览器只记住最后一次，中间值被跳过。
- 统一用
dataset存当前值：blurSlider.dataset.value = blurSlider.value，避免读取实时.value时因输入未提交而取到旧值 - 所有滑块的
input事件都只触发一次requestAnimationFrame(updateVars)，确保同帧内批量更新 - 更新函数里集中读取
dataset，再一次性调用document.documentElement.style.setProperty()，顺序固定、无竞态 - 对
drop-shadow这类复合值，不要拆成--shadow-x/--shadow-y多个变量去拼，直接存完整字符串：--drop-shadow: "0 4px 8px rgba(0,0,0,0.2)"，CSS 里写filter: drop-shadow(var(--drop-shadow))
滤镜叠加顺序为什么不能靠变量“自动对齐”
CSS 变量本身没有执行顺序，filter 的生效顺序完全取决于你在 CSS 规则中写的函数排列。写成 filter: grayscale(var(--gray)) blur(var(--blur)) 和 filter: blur(var(--blur)) grayscale(var(--gray)) 效果完全不同——前者先灰度再模糊（边缘柔和），后者先模糊再灰度（整体发虚）。
- 别试图用多个 class 分别声明不同滤镜（比如
.blur设filter: blur(...)，.gray设filter: grayscale(...)），它们会互相覆盖，不是叠加 - 所有滤镜必须写在同一行
filter声明里，用空格分隔：filter: contrast(var(--contrast)) saturate(var(--saturate)) hue-rotate(var(--hue)); - 如果某组参数只在特定场景启用（比如只在暗黑模式下加
sepia()），用[data-theme="dark"] img重写整条filter值，而不是单独追加一个函数
移动端和低端设备上哪些滤镜要特别小心
blur() 和 drop-shadow() 是性能杀手，尤其在 iOS Safari 和 Android 中低端机上，blur(2px) 就可能让滚动掉帧；三个以上滤镜叠加会让 GPU 渲染压力陡增。
-
blur(1px)是较安全的起点，blur(0.5px)在部分安卓机型上渲染异常（显示为 0），建议最小设为0.6px - 避免在
:hover或@media查询里直接改filter值，改用切换 CSS 变量（如:root { --blur: 0.6px; }），由浏览器统一触发重绘 - 如果图片已加
will-change: filter，主题切换后记得用 JS 清掉：img.style.willChange = 'auto'，否则内存持续增长 - 高清屏（
window.devicePixelRatio > 1）下，同等blur值视觉模糊感更强，可按比例缩放：--blur: calc(0.6px * (1 / var(--dpr, 1)))，并在 JS 中根据devicePixelRatio设置--dpr
实际最难的不是写对语法，是让多个滑块、多种设备、明暗主题、响应式断点全部共用同一套变量体系而不互相污染——变量名得带业务语义（比如 --img-detail-blur 而非 --blur），作用域得卡准（优先用容器级 :host 或 .gallery 覆盖，少碰 :root），更新时机得锁死（RAF + dataset 批量）。漏掉其中一环，UI 就会“看起来差不多，但总差一点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
