safari 不支持 #rrggbbaa 格式，需前置 fallback 色（如 #ff0000）并后置 #ff000080；aa 为十六进制不透明度，换算公式为 math.round(255 × alpha)，css 变量中应拆分为 rgba() 使用。
不能直接写 #rrggbbaa 就完事——必须换算准确、加 fallback、避开 Safari，否则颜色变黑或直接失效。
为什么 #ff000080 在 Safari 里不显示红色？
Safari（含 iOS 17 及更早）完全不识别 #rrggbbaa 格式。遇到 color: #ff000080，它会跳过整条声明，退回到继承色或初始值（常为黑色或透明）。这不是 bug，是标准支持缺失。Chrome 103+、Firefox 110+ 支持，但 IE 完全不认。
- 别指望“写了就能用”，必须提供降级方案
- fallback 色值得是标准 6 位十六进制或命名色，比如
color: #ff0000; color: #ff000080; - 顺序不能反：fallback 必须在前，
#rrggbbaa在后，否则旧浏览器根本看不到任何颜色
#rrggbbaa 的 aa 值怎么算才对？
aa 是十六进制，对应十进制 0–255，表示**不透明度**（不是“透明度百分比”），换算公式是：Math.round(255 * alpha)，再转两位十六进制（不足补零）。
-
alpha = 0.5→Math.round(255 * 0.5) = 128→128.toString(16) = "80"→ 正确是#ff000080 - 错例：
#ff000050→0x50 = 80→80 / 255 ≈ 0.31，实际只有约 31% 不透明度（即 69% 透明） - 错例：
#ff00000.5或"#ff0000" + 0.5→ 语法错误，CSS 解析失败 - 硬记常用值：
ff（不透）、cc（≈20% 透）、99（≈40% 透）、7f（≈50% 透）、33（≈80% 透）、00（全透）
如何在 CSS 变量中安全使用带 Alpha 的十六进制？
直接存 --color: #ff000080 没问题，但用的时候会翻车——Safari 不认这个值，background: var(--color) 会失效。真正能跨浏览器落地的方案是拆分。
- 把颜色拆成
--r、--g、--b和--alpha四个变量，例如：--primary-r: 255; --primary-g: 0; --primary-b: 0; --primary-alpha: 0.6; - 使用时写：
background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha)); -
rgba()的alpha参数只接受 0–1 小数，60%或60都无效，整条声明会被浏览器丢弃 - 如果原始色是 HSL，用
hsla()更稳，Safari 对它的支持比rgba()更早
最易被忽略的是单位一致性：一旦用了小数 0.4，就别在别处混用 40%；还有 fallback 的位置和格式，少一个分号或顺序颠倒，Safari 就给你上黑色课。这不是“能不能”的问题，是“怎么写才不会被线上用户截图投诉”的实操底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
