var(--color) 不能直接用于 rgba() 因其解析为字符串，而 rgba() 首参不接受十六进制字符串；最稳方案是拆分 rgb 分量并单独定义 --alpha，再用 rgba(var(--r), var(--g), var(--b), var(--alpha))。
var(--color) 不能直接塞进 rgba()，浏览器会静默丢弃整条声明，不报错也不 fallback——这是最常被忽略的“失效陷阱”。
为什么 rgba(var(--color), 0.5) 总是无效
因为 var(--color) 解析出来是字符串（比如 "#ff6b35" 或 "#ff6b3580"），而 rgba() 第一个参数只接受数字、颜色关键字或函数调用，不接受十六进制字符串。Chrome/Firefox/Edge 即使支持 #RRGGBBAA，也仅限写死值，不认变量间接引用；Safari（含 iOS 17/macOS 14）至今完全忽略 #RRGGBBAA 格式。
- 现象：样式消失、背景变黑或继承父色，控制台无提示
- 本质：CSS 变量是字符串容器，不是颜色类型，无法参与运行时 alpha 运算
- 别试
color(from var(--color) r g b / 0.6)：语法规范但 Safari/Firefox 基本不支持（截至 2026 年 8 月）
最稳方案：拆 RGB 分量 + 单独存 --alpha
手动把十六进制转成十进制，存为 --primary-r、--primary-g、--primary-b 和 --primary-alpha，再用 rgba() 组装。兼容所有现代浏览器（包括 Safari 12+）。
-
--primary-r: 255、--primary-g: 107、--primary-b: 53、--primary-alpha: 0.5 - 使用：
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha)); - 不透明时可复用：
color: rgb(var(--primary-r), var(--primary-g), var(--primary-b)); - Alpha 必须统一用小数（0–1），别混用
50%或128，否则计算错乱
现代写法：用 / 语法配合 rgb() 或 hsl()
如果你目标浏览器是 Chrome 111+、Firefox 110+、Safari 16.4+，推荐用空格 + / 的新语法，更简洁且语义清晰。
- 正确：
background-color: rgb(255 107 53 / 0.5)、color: hsl(14 100% 60% / 0.7) - 错误：
rgb(255, 107, 53, 0.5)（逗号分隔不支持/）、#ff6b35 / 0.5（/不适用于 hex 或关键字） - 变量需先转为函数形式：
--primary: hsl(14 100% 60%)，再写background-color: var(--primary) / 0.5（需构建工具如 PostCSS 支持或原生浏览器支持）
慎用方案：伪元素 or color-mix()
伪元素能绕过变量限制，但增加 DOM 节点和定位开销；color-mix() 看似优雅，实则混合的是颜色而非 alpha 通道，结果与 rgba() 不同，且 Safari 支持仍不稳定。
- 伪元素写法：
.el::before { background: var(--color); opacity: 0.5; }—— 注意要设z-index和content: "" -
color-mix(in srgb, var(--color) 80%, transparent)在部分场景可用，但不等价于rgba(..., 0.8)，尤其在深色背景下偏差明显 - 别指望它从
#hex提取 alpha：CSS 没有运行时解析 hex 字符串的机制
真正容易被忽略的是变量命名意图：--primary-rgb 比 --primary 更明确地表达“这个变量专供 rgb() 或 rgba() 使用”，避免后续接手的人误以为 var(--primary) 能直接传进 rgba()。alpha 值单位一旦定为小数，就别在另一处改成百分比——这种不一致会在主题切换或覆盖时引发难以追踪的透明度漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
