CSS变量不能直接存rgb()函数值，因为浏览器将其视为字符串而非可解析颜色，导致var(--color)无效；必须拆分为--r、--g、--b三个纯数字变量，在rgb()中用var()引用实现动态颜色控制。
CSS变量不能直接存rgb()函数值，必须拆成--r、--g、--b三个独立数值变量，再在rgb()里用var()引用。
为什么不能直接写 --color: rgb(255, 100, 50)？
浏览器把rgb(255, 100, 50)当做一个字符串值，而var(--color)插入时不会被解析为颜色，结果是无效声明（开发者工具里该属性会显示为划掉）。CSS变量只存储原始值，不执行函数调用。
- 错误写法：
:root { --color: rgb(255, 100, 50); } div { background-color: var(--color); }→ 无颜色生效 - 正确思路：变量只存数字，
rgb()函数写在使用处，由浏览器实时计算 - 所有分量必须是纯数字（不能带
%、px等单位），否则rgb(var(--r), ...)会失败
如何用 CSS 变量实现 hover 时切换 RGB 颜色？
靠伪类重定义变量，而不是改background-color本身——这样能复用同一套rgb()表达式，逻辑更干净。
- 基础定义：
:root { --r: 30; --g: 144; --b: 255; }（steelblue） - 元素使用：
button { background-color: rgb(var(--r), var(--g), var(--b)); } - 悬停覆盖：
button:hover { --r: 255; --g: 69; --b: 0; }（orangeRed） - 注意：变量作用域是级联的，
:hover里改的变量只影响该元素及其后代中后续引用它的样式
JS 修改 RGB 变量时容易踩哪些坑？
用element.style.setProperty()更新时，数值类型和范围必须严格合规，否则rgb()渲染会回退或失效。
立即学习“前端免费学习笔记（深入）”；
- 传字符串数字即可：
el.style.setProperty('--r', '200')✅；但'200px'❌ 或200（number 类型）在某些旧版 Safari 中可能出问题，统一用字符串最稳 - 超出范围不报错但会被截断：
--r: 300→ 实际按 255 处理；--r: -10→ 按 0 处理 - 别漏掉 alpha：如需透明度，得额外定义
--a，并用rgba(var(--r), var(--g), var(--b), var(--a))，rgb()本身不支持第四个参数 - 批量更新建议用
document.documentElement.style统一设，避免逐个元素操作引发重排
真正麻烦的不是怎么写，而是当多个组件共用同一组--r/--g/--b变量时，状态容易互相覆盖。语义化命名（比如--primary-r、--accent-b）比通用名更可靠，尤其在深嵌套或动态主题场景下。
