rrggbbaa不是简单在六位hex后加两位，而是css color level 4定义的完整八位格式，aa为十六进制alpha通道（00=全透，ff=不透），需严格8位小写无空格，且必须手动搭配rgba() fallback才能安全落地。
#RRGGBBAA 就行，但必须写满 8 位、小写、无空格，且得配 rgba() fallback 才能真正在项目里用起来。
为什么 #RRGGBBAA 不是“多加两位”那么简单
它不是在 #RRGGBB 后面随便补两个数字——AA 是 alpha 通道值，范围固定为 00（全透）到 FF（不透），对应十进制 0–255。写成 #ff000050 看似像 50% 透明，其实 50 是十六进制，等于十进制 80，透明度约 31%，不是你想要的 50%。
-
7F≈ 50%（127 / 255） -
CC≈ 80%（204 / 255） -
33≈ 20%（51 / 255） -
00= 完全透明，FF= 完全不透明（等价于省略AA的 6 位写法）
#RGBA 简写只对原色安全，别乱用
#f008 看起来省事，但它实际被解析为 #ff000088，不是 #ff000050。只有当 R、G、B 每对数字相同时（比如 #ff0000 → #f00），#RGBA 才成立；否则会错位。八位格式没有通用简写规范，#RGBAA 是无效语法。
- ✅ 正确：
#ff6b6b80、#3498db40 - ❌ 错误：
#f008（除非你真要#ff000088）、#349db40（位数不对）
兼容性差，fallback 必须手动写，顺序不能错
IE 和旧版 Safari 直接忽略 #RRGGBBAA，不会降级，也不会报错——样式就没了。CSS 不会自动 fallback，必须人为写两遍：
background-color: rgba(52, 152, 219, 0.25); background-color: #3498db40;
- 旧浏览器读到第一行就用上，跳过第二行
- 新浏览器覆盖第一行，用第二行（更紧凑、语义更准）
- 顺序反了，旧浏览器就啥都得不到
- 构建工具（如某些 PostCSS 插件）可能默认剔除“非标”八位值，得检查配置是否允许
customProperties或color-function支持
别和 opacity 混，它们作用对象完全不同
background-color: #00000080 只让背景半透，文字、子元素照常显示；opacity: 0.8 会让整个元素连同所有子节点一起变淡。用错一个，UI 层级就乱了。
- 要控制颜色本身透明度 → 用
rgba()或#RRGGBBAA - 要整体虚化效果（比如蒙层淡入）→ 才考虑
opacity - 动态生成时，
rgba(${r}, ${g}, ${b}, ${alpha})比拼接八位字符串更稳，尤其 alpha 来自用户输入或 API
#RRGGBBAA，而是构建流程是否保留它、设计系统 token 是否同步支持 8 位格式、以及团队是否统一了透明度换算习惯——这些比语法本身更耗调试时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
