必须拆分为--r、--g、--b三个独立数值变量并在rgb()中分别引用，因css rgb()函数仅接受单独数值参数；混用字符串、单位或单变量存逗号分隔值均导致整条声明静默失效。
直接用 --r、--g、--b 三个变量分别存整数，再在 rgb() 里用 var(--r) 等引用——这是唯一能稳定生效的写法。其他拆分方式（比如拼字符串、混用单位、试图用单个变量存“0,0,0”）都会导致浏览器静默丢弃整条颜色声明。
为什么必须拆成三个独立变量？
CSS 的 rgb() 函数要求每个参数是单独的数值，不能是逗号分隔的字符串或带单位的值。rgba(var(--rgb), var(--a)) 这类写法会失败，因为 --rgb 如果定义为 "0, 0, 0"，它就是一个字符串，不是三个数字。
-
--r: 255、--g: 165、--b: 0✅ 浏览器能正确解析为三个独立数值 -
--rgb: "255, 165, 0"❌rgb(var(--rgb))不合法，整条规则被忽略 -
--r: 255px❌ 单位混入后，rgb(var(--r), ...)也会失效
JS 修改时要注意数值类型和同步方式
JavaScript 传值必须是纯数字，不能带引号或单位；否则 CSS 层拿到的是字符串，calc() 或 rgb() 都无法参与计算。
- 正确：
el.style.setProperty('--r', 255)或el.style.setProperty('--r', String(255)) - 错误：
el.style.setProperty('--r', '255')（虽看似一样，但部分旧版 Safari 对字符串数字解析不稳定） - 批量更新更高效：
el.style.cssText = '--r:255;--g:165;--b:0;'，避免多次触发样式重算
兼容性与 fallback 必须手动加
CSS 变量本身不提供降级机制，IE 完全不支持，旧版 Safari 对 rgb() 中变量的支持也有缺口。不能依赖浏览器自动回退。
- 必须在变量声明前写一条静态 fallback：
background-color: rgb(255, 165, 0); - 或者用
color: var(--text-color, #333);提供默认值，但注意这仅对属性值有效，不适用于rgb()内部 - 若需全链路兼容（含 IE），得放弃变量方案，改用
data-属性 + JS 注入内联样式
最易被忽略的一点：变量未定义时，rgb(var(--r), var(--g), var(--b)) 不会渲染成黑/白/透明，而是直接回退到继承色或初始值（通常是 transparent 或 currentColor），视觉上可能“消失”，且 DevTools 里不会报错，只显示划掉的声明。务必在 :root 或目标元素上显式初始化所有通道变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
