CSS变量不能直接存rgb()函数，因为浏览器将其视为字符串而非可计算颜色值，导致background-color: var(--color)失效；必须拆分为--r、--g、--b等纯数字变量，在使用处用rgb(var(--r), var(--g), var(--b))实时计算。
CSS变量不能直接存rgb()函数，必须拆成--r、--g、--b三个数值变量再拼接。
为什么rgb()不能直接赋给CSS变量？
浏览器把rgb(255, 100, 50)当字符串处理，不是可计算的颜色值。声明--color: rgb(255, 100, 50)后，在background-color: var(--color)里会失效，最终回退为透明或黑色。
真正生效的方式是让rgb()函数在使用处实时计算，靠var(--r)这类数值变量驱动：
-
--r、--g、--b必须是纯数字（不带单位、不带引号） - 每个值范围严格：0–255（整数），超出则静默失败
- alpha 同理：
--a: 0.7，然后用rgba(var(--r), var(--g), var(--b), var(--a))
怎么用伪类切换RGB颜色？
关键不是改background-color，而是重定义底层变量。CSS变量支持作用域继承，所以:hover里改--r，所有依赖它的rgb()表达式会自动更新。
示例：
:root {
--r: 30; --g: 144; --b: 255;
}
button {
background-color: rgb(var(--r), var(--g), var(--b));
}
button:hover {
--r: 255; --g: 69; --b: 0;
}
注意点：
- 变量名要有语义，比如
--primary-r，避免多个组件共用--r导致冲突 -
button:hover里改的变量只影响该按钮及其后代，不会污染全局 - 如果子元素也用了同一组变量，要确认是否需要隔离（可用
all: unset重置）
JS动态修改时最容易踩的坑
用element.style.setProperty('--r', '255')看似简单，但实际容易出错：
- 传字符串
'255'能运行，但若含空格或换行（如'255 '），rgb()会静默失败 - 推荐统一用
Math.round()或parseInt()确保类型干净 - 用户输入的alpha值（比如滑块）必须
clamp到[0, 1]，否则rgba()直接不渲染 - 别在循环里频繁读写
getComputedStyle和setProperty，会触发强制重排
更安全的写法：
const el = document.querySelector('button');
el.style.setProperty('--r', Math.round(rValue));
el.style.setProperty('--g', Math.max(0, Math.min(255, gValue)));
el.style.setProperty('--a', Math.max(0, Math.min(1, aValue)));
过渡动画怎么加才平滑？
直接对background-color加transition就行，不用动变量本身：
button {
background-color: rgb(var(--r), var(--g), var(--b));
transition: background-color 0.3s ease;
}
注意：
- 不要对
--r等变量加transition——CSS变量本身不触发重绘 - 如果颜色跳变明显，说明某一分量溢出（比如
--r设成了300），浏览器丢弃整个rgb()值，回退到初始色 - 深色模式切换等复杂场景，建议用
HSL变量替代RGB，明度（L）调节更直观
最常被忽略的是数值范围校验和空格规范——哪怕rgb(${r},${g},${b})少一个空格，在旧版 Safari 里也会挂掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
