CSS变量不能直接用于rgba()因解析为字符串而非数值，Safari不支持#RRGGBBAA，最稳解法是拆RGB分量存为--primary-rgb并配合--primary-alpha使用rgba(var(--primary-rgb), var(--primary-alpha))。
不能直接在 CSS 变量里写 #RRGGBBAA 然后当透明色用——Safari 不认，rgba(var(--color), 0.5) 会失败，浏览器也不报错，只静默 fallback 到黑色或继承色。
为什么 var(--primary) 不能直接塞进 rgba()
因为 var(--primary) 解析出来是字符串 "#ff6b3580" 或 "#ff6b35"，而 rgba() 函数只接受三个数字加一个小数，比如 rgba(255, 107, 53, 0.5)。传字符串进去，整个声明被丢弃，控制台无提示。
- Chrome/Firefox/Edge 支持
#RRGGBBAA，但仅限**直接写死在属性值里**，不支持变量间接引用 - Safari（iOS 17/macOS 14）至今不解析
#RRGGBBAA，哪怕你写了background: #ff6b3580，它也当无效处理 -
color-mix()或color()函数尚无稳定实现，别指望靠它从 hex 提取 alpha
最稳的解法：拆 RGB + 单独存 --alpha
把颜色拆成数字分量，再用 rgb()/rgba() 组装，兼容所有现代浏览器（包括 Safari 12+）。
- 先手动或用工具把
#ff6b35转成255, 107, 53，存为--primary-rgb: 255, 107, 53 - 透明度统一用小数（
0–1），比如半透写--primary-alpha: 0.5，别混用50%或128 - 不透明时：
color: rgb(var(--primary-rgb)); - 要透明时：
background: rgba(var(--primary-rgb), var(--primary-alpha));
想复用原 hex 变量？必须 fallback 且顺序不能错
如果你已定义了 --primary: #ff6b35，又不想改结构，只能手动 fallback，且顺序必须是 rgba() 在前、#RRGGBBAA 在后：
立即学习“前端免费学习笔记（深入）”；
button {
background: rgba(255, 107, 53, 0.5);
background: #ff6b3580;
}
- IE 和旧 Safari 忽略第二行，靠第一行保底；新浏览器覆盖第一行，用第二行（更简洁）
- 千万别反着写——老浏览器跳过第一行，第二行又无效，结果背景变透明或继承父色
-
#RRGGBBAA必须严格 8 位小写，#ff6b3580✅，#FF6B3580❌，"#ff6b3580"❌，#ff6b35 80❌
真正容易被忽略的是：alpha 值单位必须全局一致，且 RGB 分量变量名最好带提示，比如 --primary-rgb 而不是 --primary——否则别人（或一周后的你）看到 var(--primary) 根本不知道它能不能传进 rgba()。
