rgba()不解析CSS变量，因var(--color)返回字符串而非数值参数，导致声明失效；须拆分RGB为独立变量或逗号分隔字符串，再组合使用。
直接用 rgba() 套 CSS 变量会失败，因为函数不解析变量；必须把 RGB 分量拆开存为独立数值，再组合使用。
为什么 rgba(var(--color), 0.5) 不工作
浏览器在解析 rgba() 时只接受字面数字，var(--color) 是字符串（比如 "59, 130, 246"），不是三个独立参数。结果是整个声明被忽略，元素颜色回退到继承值或透明黑。
- 错误写法：
background-color: rgba(var(--color), 0.7); - 控制台无报错，但开发者工具里该行会被划掉（strikethrough）
- 旧版 Safari 对空格更敏感：写成
59, 130, 246可能失败，而59,130,246更稳妥
正确存储 RGB 分量的写法
把颜色拆成红、绿、蓝三个整数变量，或一个逗号分隔的字符串变量——两者都可行，但用途不同：
- 要单通道调节（比如只加亮红色）：用三个独立变量
--r: 59; --g: 130; --b: 246; - 要简洁复用（如同时用于
rgb()和rgba()）：用一个变量--rgb: 59, 130, 246; - 定义时不要加引号，也不带括号；逗号后不加空格（兼容性更强）
示例：
:root {
--primary-rgb: 59,130,246;
}
.button {
background-color: rgba(var(--primary-rgb), 0.8);
color: rgb(var(--primary-rgb));
}
运行时动态改透明度的三种路径
选哪条取决于目标浏览器和是否需要 JS 参与：
- 现代浏览器（Chrome 111+ / Safari 16.4+）：用
color-mix(in srgb, var(--base), transparent 60%)，注意60%是透明比例，等效于40%不透明度 - 兼容性优先：用
hsl(var(--h), var(--s), var(--l) / var(--a))，支持 alpha 通道语法，子元素不受影响 - 需支持 IE 或老 Safari：JS 读取
getComputedStyle(el).getPropertyValue('--r')，拼出rgba(${r}, ${g}, ${b}, ${a})后设给el.style.backgroundColor
别用 opacity 替代——它会让文字、图标一起变淡，语义上不是“背景透明”，而是“整个元素变淡”。
最容易被忽略的细节
RGB 分量变量一旦定义，就只能被 rgb()、rgba()、color-mix() 或 hsl() 等函数消费；不能直接用于 color: var(--rgb)，那会当成无效颜色值。另外，color-mix() 的百分比位置不接受变量插值，所以 transparent var(--pct) 会失效，必须靠 JS 更新变量触发重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
