safari 不支持 #rrggbbaa 格式，故需拆分 rgb 与 alpha 变量以确保兼容性；推荐用 rgb()/rgba() 或 hsla() 组合，并统一 alpha 为 0–1 小数。
为什么不能直接在 --color 里写 #ff000080？
CSS 变量本身支持任意字符串值，#ff000080 确实能存进去，但问题出在后续使用上：当你把它用在 color、background 等属性时，浏览器会按“带 alpha 的十六进制”解析——这仅在 CSS Color Module Level 4 中被正式支持，而 Safari（截至 iOS 17 / macOS 14）仍不识别 #rrggbbaa 或 #rgba 格式。直接赋值会导致 Safari 渲染为不透明黑色或 fallback 失败。
拆成 --r、--g、--b 和 --alpha 是最稳的方案
把颜色拆成 RGB 分量 + 透明度，再用 rgb() 或 rgba() 函数组合，能 100% 兼容所有现代浏览器（包括旧版 Edge 和 Safari）。关键不是“必须拆”，而是“拆了才能可控地注入 alpha”。
-
--primary-r: 255、--primary-g: 0、--primary-b: 0、--primary-alpha: 0.6 - 使用时写
color: rgb(var(--primary-r), var(--primary-g), var(--primary-b)); - 需要透明时写
background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha)); - 注意：
rgba()的 alpha 参数不接受百分比（如60%），只认0–1小数
想复用原生十六进制变量？用 color-mix() 或预处理器更现实
如果你已有 --primary: #ff0000，又不想手动拆 RGB，纯 CSS 目前没标准方法从 #hex 动态提取分量。可行路径只有两条：
- 用
color-mix(in srgb, var(--primary) 60%, transparent)模拟半透效果（Chrome 111+ / Safari 16.4+ 支持，Firefox 尚未支持） - 在构建时用 PostCSS、Sass 或 JS 脚本把
#ff0000预转成--r: 255等变量，避免 runtime 解析 - 放弃“运行时动态改 alpha”，改为定义多档变量：
--primary-100、--primary-60、--primary-30，各自对应完整 RGBA 值
别忽略 hsl() 这条捷径
如果原始色是设计系统里已知的 HSL 值（比如主色是 hsl(0, 100%, 50%)），直接用 --primary-h: 0、--primary-s: 100%、--primary-l: 50%，再配合 --primary-alpha，就能写 color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-alpha));。HSL 拆解比 RGB 更直观，且 Safari 对 hsla() 的兼容性比 rgba() 更早、更稳。
真正容易被忽略的是 alpha 值的单位一致性：一旦你在某处用了小数（0.4），就别在另一处混用百分比（40%），否则计算和覆盖会出错。变量命名也建议带上单位提示，比如 --alpha-40 而非 --alpha-04。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
