CSS变量中直接写rgba()会失效，因其仅存储字符串而不解析函数；现代方案用color()函数如color(display-p3 var(--red-rgb) / 0.4)，或Tailwind/PostCSS支持的rgb(var(--x) / a)语法；IE兼容需拆分为r/g/b/a四变量并手动拼rgba()。
直接在CSS变量里写rgba()会失效
很多人以为把rgba(255, 0, 0, 0.4)直接塞进:root变量就能复用，结果发现background-color: var(--primary);根本没透明效果——浏览器会把它当字符串解析，不执行函数调用。这不是bug，是CSS变量的语义限制：它只存值，不解析函数。
用rgb() + color-mix()或color()函数动态加透明度（现代方案）
Chrome 111+、Firefox 117+、Safari 16.4+ 支持color-mix()和color()，可安全组合变量与透明度：
-
--red-rgb: 255 0 0;→ 存RGB三元组（空格分隔，无括号） -
background-color: color(display-p3 var(--red-rgb) / 0.4);→ Safari/Chrome可用 -
background-color: color-mix(in srgb, var(--red-rgb) 100%, black 0%);→ 配合alpha()或插值控制透明，但目前color-mix()暂不直接支持alpha参数，需靠混合黑色模拟
更稳妥的是用color()函数：color(display-p3 var(--red-rgb) / 0.4)，其中/ 0.4就是alpha通道，这是当前最接近原生RGBA语义的写法。
Tailwind或PostCSS用户优先用rgb(var(--x) / <alpha>)</alpha>语法
Tailwind 3.3+ 和支持postcss-custom-properties的构建工具能识别这种特殊语法：
立即学习“前端免费学习笔记（深入）”；
- 定义：
--primary-rgb: 30 144 255; - 使用：
background-color: rgb(var(--primary-rgb) / 0.6); - 注意：
/后面必须是数字或var(--alpha)，不能带单位或百分号 - 兼容性：该写法依赖CSS自定义属性解析器，旧版Edge或IE完全不支持，上线前务必检查构建工具是否启用对应插件
需要IE兼容时只能回退到双变量 + rgba()内联
如果项目还要支持IE11或老旧Android WebView，别折腾函数，老老实实用两套变量：
-
--primary-r: 30;、--primary-g: 144;、--primary-b: 255;、--primary-a: 0.6; - 然后在每个用到的地方手动拼：
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-a)); - 缺点：无法在
background简写中复用；var()不能嵌套，所以rgba(var(--rgb), 0.6)这种写法无效
真正容易被忽略的是：哪怕用了rgb(var(--x) / a)，父元素若没有明确背景色，半透明色渲染结果仍会受底层内容干扰——这不是变量问题，是RGBA混合机制本身决定的，调试时得连同父级背景一起看。
