唯一安全方案是将 alpha 抽为独立变量配合 rgba() 或 hsla() 使用，因 css 变量返回字符串而 rgba() 需数值参数，嵌套 hex 值会失效；必须拆分 rgb/hsl 分量与 alpha，且 --alpha 须为 0–1 小数，支持动画与 js 动态修改。
直接把 alpha 抽成独立变量，配合 rgba() 或 hsla() 使用——这是唯一能安全过渡、复用、调试的方案。
为什么不能在 rgba() 里嵌套 var(--color)？
CSS 变量返回的是字符串，而 rgba() 要求四个数值参数。写成 rgba(var(--r), var(--g), var(--b), var(--a)) 是合法的，但 rgba(var(--hex-color), 0.5) 会失败，因为 --hex-color 值是 "#3b82f6" 这种字符串，rgba() 根本不认。
- 浏览器解析时直接丢弃整条声明，退回到继承色或初始值
- DevTools 的 Computed 面板里看不到报错，只会显示
background-color: initial或空值 - 想“动态改颜色+透明度”，必须把 RGB/HSL 分量和 alpha 拆开传
--alpha 单独定义，再组合进 rgba() 或 hsla()
这是目前最稳定、可动画、可 JS 注入的模式。比如：
:root {
--primary-r: 59;
--primary-g: 130;
--primary-b: 246;
--primary-a: 0.7;
}
.btn {
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-a));
}
-
--primary-a必须是 0–1 的小数（不是70%），否则整个rgba()失效 - JS 修改时用
element.style.setProperty('--primary-a', '0.3')，无需拼接字符串 - 配合
transition: --primary-a 0.2s可实现背景透明度渐变（注意：只支持 Chrome 112+、Firefox 111+、Safari 16.4+）
用 #rrggbbaa 写死透明度，但别指望它“动态”
现代浏览器（Chrome 65+、Firefox 62+、Safari 12.1+）确实支持 --primary: #3b82f680 这种 8 位写法，但它是个静态值：
- 无法用
transition动画 —— 浏览器不支持对十六进制颜色做插值 - JS 无法单独读取/修改其中的 alpha 字段，只能整串替换
- 如果设计稿要求同一色相下 20%/50%/80% 三档透明度，就得定义三个变量：
--primary-20、--primary-50、--primary-80 - 写错位数（如
#3b82f68少一位）或混用大小写（#3B82F680合法，但#3b82f68G会静默失败）
用 hsla() 时，% 和小数别混搭
HSLA 对语法错误极其敏感，两个地方最容易翻车：
-
--s和--l必须带%符号，比如--s: 70%；写成--s: 70会被当 7000%，结果极亮且不可预测 -
--a必须是小数，比如--a: 0.4；写成--a: 40%整个函数失效，computed 值为空 - JS 注入时记得补符号：
el.style.setProperty('--s', '65%')，而不是'65'
真正麻烦的不是写法本身，而是这些错误不会报错，只会在 DevTools 里悄悄消失——你得盯着 Computed 面板里的 background-color 值是否真的生效，而不是靠肉眼判断“好像有点透”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
