CSS变量如何设置RGB颜色通道？

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变量只存储原始值，不执行函数调用。

1. 错误写法：:root { --color: rgb(255, 100, 50); } div { background-color: var(--color); } → 无颜色生效
2. 正确思路：变量只存数字，rgb()函数写在使用处，由浏览器实时计算
3. 所有分量必须是纯数字（不能带%、px等单位），否则rgb(var(--r), ...)会失败

如何用 CSS 变量实现 hover 时切换 RGB 颜色？

靠伪类重定义变量，而不是改background-color本身——这样能复用同一套rgb()表达式，逻辑更干净。

1. 基础定义：:root { --r: 30; --g: 144; --b: 255; }（steelblue）
2. 元素使用：button { background-color: rgb(var(--r), var(--g), var(--b)); }
3. 悬停覆盖：button:hover { --r: 255; --g: 69; --b: 0; }（orangeRed）
4. 注意：变量作用域是级联的，:hover里改的变量只影响该元素及其后代中后续引用它的样式

JS 修改 RGB 变量时容易踩哪些坑？

用element.style.setProperty()更新时，数值类型和范围必须严格合规，否则rgb()渲染会回退或失效。

1. 传字符串数字即可：el.style.setProperty('--r', '200') ✅；但'200px' ❌ 或200（number 类型）在某些旧版 Safari 中可能出问题，统一用字符串最稳
2. 超出范围不报错但会被截断：--r: 300 → 实际按 255 处理；--r: -10 → 按 0 处理
3. 别漏掉 alpha：如需透明度，得额外定义--a，并用rgba(var(--r), var(--g), var(--b), var(--a))，rgb()本身不支持第四个参数
4. 批量更新建议用document.documentElement.style统一设，避免逐个元素操作引发重排

真正麻烦的不是怎么写，而是当多个组件共用同一组--r/--g/--b变量时，状态容易互相覆盖。语义化命名（比如--primary-r、--accent-b）比通用名更可靠，尤其在深嵌套或动态主题场景下。