8位hex颜色必须准确换算透明度、添加fallback色值并避开safari等旧环境，否则颜色失效或变黑；正确做法是math.round(255*alpha)转两位十六进制，并前置6位色值作降级。
能用，但必须换算准确、加 fallback、避开 Safari 和旧环境 —— 否则颜色直接失效或变黑。
8位HEX的AA值不是百分比，必须转成十六进制
写 #ff6b6b4d 表示 30% 透明度是对的，但前提是 4d 是 0.3 的正确十六进制换算结果（0x4d = 77，77 / 255 ≈ 0.302）。常见错误包括：
- 把 0.3 直接当
30填进去 →#ff6b6b30（错：0x30 = 48 → ≈19%） - 把 50% 当
50→#ff6b6b50（错：0x50 = 80 → ≈31%，不是 50%） - 用小数或百分比字符串拼接，如
"#ff6b6b" + 0.3→ 得到#ff6b6b0.3（语法错误）
正确做法是：先算 Math.round(255 * alpha)，再转成两位十六进制字符串（不足补零）：
const toHexAlpha = (alpha) => {
const val = Math.round(255 * Math.max(0, Math.min(1, alpha)));
return val.toString(16).padStart(2, '0');
};
// toHexAlpha(0.3) → "4d"
必须提供 fallback 色值，否则 Safari 和 IE 会渲染异常
Safari（含 iOS 17 及更早）完全不识别 #RRGGBBAA，遇到 color: #ff000080 会直接忽略该声明，退回到继承色或初始值（常表现为黑色或透明）。不能只靠“现代浏览器支持”就上线。
- 必须前置一个标准 6 位色值：
color: #ff0000; color: #ff000080; - 顺序不能反：CSS 从上到下解析，后声明覆盖前声明；IE/Safari 忽略第二行，保留第一行
- 不要依赖 CSS 预处理器自动补 fallback —— Sass/Less 默认不处理
#RRGGBBAA，编译时报错或静默丢弃
别在 CSS 变量里直接存 #RRGGBBAA 值
CSS 自定义属性允许存任意字符串，--primary: #ff000080 本身不会报错，但当你写 color: var(--primary) 时，Safari 无法解析这个值，最终 color 失效。
- 安全方案是拆成 RGB 分量 + 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)); - 如果原始色来自设计系统且已知 HSL，用
hsla()更稳（Safari 对hsla()支持早于rgba()）
简写格式 #RGBA（4位）和 #RRGGBBAA（8位）不能混用
#f008 看似简洁，但它等价于 #ff000088（红=ff、绿=00、蓝=00、alpha=88），不是 #ff000050。这种“自动双写”规则只对原始可简写的 3 位色有效（#f00 → #ff0000），而 alpha 位不参与双写逻辑。
- 输入
#3a86ff60（8位）是明确的：R=3a, G=86, B=ff, A=60 - 输入
#3a86f60（7位）是非法的：浏览器解析行为不一致，Chrome 可能截断，Firefox 可能报错 - 所有 8 位值必须严格为 8 字符，开头带
#，字母大小写不敏感，但建议统一小写便于 diff 和压缩
真正容易被忽略的是：alpha 换算不是线性映射表，而是固定除以 255；同一设计稿里若同时出现 rgba(0,0,0,0.3) 和 #0000004d，它们视觉一致，但若有人手写 #00000030 就会偏暗 —— 这种偏差在线上环境极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
