8位hex颜色中aa表示不透明度而非透明百分比，50%不透明度应为#ff000080；必须前置rgba() fallback且严格遵循8字符小写格式，否则safari等浏览器静默失效。
8位HEX的AA值不是小数，必须手动换算成00–FF
写 #ff000050 想表达 50% 透明度？错。浏览器把 50 当作十六进制数，即十进制 80，对应不透明度 ≈ 31%（80 / 255），不是你想要的 50%。真正 50% 不透明度（即 alpha = 0.5）应换算为 Math.round(255 * 0.5) = 128 → 十六进制 80 → #ff000080。
常见错误包括：
- 直接拼接小数：
"#ff0000" + 0.5→#ff00000.5（语法错误） - 把百分比当十六进制填：
#ff000050（实际≈31%不透明） - 心算出错：0.7 → 255×0.7=178.5 → 应取整为 179 →
b3，不是70或77
推荐用一行 JS 快速验证：Math.round(255 * 0.7).toString(16).padStart(2, "0") → "b3"。
CSS中#RRGGBBAA必须严格8字符、全小写、无空格无引号
浏览器对格式校验极严，任何偏差都会导致整条声明静默失效——不报错、不渲染、颜色“消失”或回退到继承色。
合法示例：#ff6b6b80 ✅
非法示例：
-
"#ff6b6b80"❌（引号让 CSS 解析为字符串字面量） -
#ff6b6b 80❌（空格中断解析） -
#ff6b6b8❌（仅7字符，无效） -
#FF6B6B80❌（大小写混用，部分构建工具或预处理器可能报错）
注意：CSS 变量中若动态拼接，也必须保证最终值是纯 8 字符小写字符串，比如 --primary: #ff6b6b80;，不能写成 --primary: "#ff6b6b80";。
必须加 rgba() fallback，否则 Safari 和旧版浏览器会变黑或忽略
Safari（含 iOS 17 及更早）、IE、部分安卓 WebView 完全不识别 #RRGGBBAA。遇到 color: #ff000080 会跳过该声明，退回到父级 color 或初始值（常表现为黑色文字或透明背景）。
正确写法是前置兼容声明：
button {
color: rgba(255, 0, 0, 0.5);
color: #ff000080;
}
关键点：
- rgba() 必须写在前，CSS 层叠覆盖才生效
- rgba() 的 alpha 值（0.5）和
#ff000080的语义一致，但数值系统不同——前者是小数，后者是十六进制 - 不要省略 fallback：哪怕只支持现代浏览器，CI/CD 构建时若用旧版 Autoprefixer 或 CSS 压缩器，也可能意外剥离
别混淆透明度语义：AA 是不透明度，不是“透明百分比”
00 = 完全透明（看不见），ff = 完全不透明（等价于 6 位 HEX）。中间值越小，越透明；越大，越实。
容易翻车的典型场景：
- 想实现“半透遮罩”，写了
#00000040（≈25% 不透明 → 75% 透明），结果太淡，误以为写错了——其实是数值本身就不够高 - 看到别人用
#00000080（50% 不透明），自己照抄却填成#00000050（≈31%），发现效果偏浅 - 查表时混淆“透明度”和“不透明度”列：有些对照表标的是“透明度 %”，有些标的是“alpha 值（0–1）”，务必确认列标题
硬记几个锚点值更可靠：ff（100% 不透明）、cc（≈80% 不透明）、80（50% 不透明）、4d（30% 不透明）、33（20% 不透明）、00（0% 不透明）。
实际项目里最常被忽略的，是 fallback 的顺序和 Safari 的静默降级行为——它不会警告你，只会让你在真机调试时突然发现按钮文字变黑了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
