能用，但必须写对8位格式#rrggbbaa：前6位为标准颜色、后2位为十六进制alpha（00–ff），全小写、无空格引号；错一位或格式不符即静默失效，且需手动fallback并确保旧浏览器兼容。
能用，但必须写对 8 位格式 #RRGGBBAA，且浏览器得支持——错一位、少一个字符、多一个空格，整条声明就静默失效，控制台还不报错。
怎么写才合法：必须是连续 8 位小写十六进制
#RRGGBBAA 不是“加个透明度后缀”，而是严格定义的 8 字符序列：前 6 位是标准颜色，后 2 位是 alpha（00–FF）。浏览器校验极严，容不得半点偏差。
-
#ff6b3580✅ 正确：8 位、小写、无空格、无引号 -
"#ff6b3580"❌ 引号导致变量值变成字符串字面量，color: var(--primary)渲染失败 -
#ff6b35 80❌ 空格中断解析，整条声明被丢弃 -
#ff6b358❌ 少一位，不是 8 位即无效 -
#F53C❌ 这是 4 位简写，只适用于原色可压缩的值（如#f00→#ff0000），#F53C实际被解析为#ff5533cc，完全不是你想要的颜色
透明度值 AA 怎么换算：不是百分比，也不是小数
AA 是十六进制，对应十进制 0–255，直接决定不透明程度：00 = 完全透明，FF = 完全不透明。别把 0.5 直接写成 50——50 是十六进制，等于十进制 80，实际透明度 ≈ 31%，不是 50%。
- 50% 透明度 → 不透明度 50% → 十进制 127.5 → 取整 127 → 十六进制
7F（不是80；80是 128/255 ≈ 50.2% 不透明） - 常用值可硬记：
FF（不透）、CC（≈20% 透）、99（≈40% 透）、7F（≈50% 透）、33（≈80% 透）、00（全透） - JS 一行速算：
Math.round(alpha * 255).toString(16).padStart(2, '0')，比如Math.round(0.5 * 255).toString(16).padStart(2, '0')→"7f"
兼容性 fallback 必须手动写，且顺序不能反
CSS 不会自动降级。IE 和 Safari ≤15 完全忽略 #RRGGBBAA，若没 fallback，元素可能渲染为默认黑或继承父背景，调试时极易误判为“样式没生效”。
- fallback 必须显式写出，且按“旧→新”顺序：
background-color: #2c3e50;→background-color: rgba(44, 62, 80, 0.85);→background-color: #2c3e50d9; - 顺序反了（比如把
#RRGGBBAA写在最前），旧引擎跳过整块规则，可能连 fallback 都不生效 - Safari（尤其 iOS 17 / macOS 14 前）不支持
#rrggbbaa，CSS 变量里存--primary: #ff000080在 Safari 里会静默失效，推荐改用rgba()或hsla()拆分变量
CSS 变量里用 #RRGGBBAA 的真实限制
变量本身能存，但后续使用依赖浏览器解析能力。Safari 不认，就是不认——它不会尝试从字符串里提取 RGB 再套 alpha，也不会报错，只会默默 fallback 到初始值（比如黑色）。
- 正确用法：
:root { --primary: #ff6b3580; }+color: var(--primary);（仅限支持浏览器） - 错误用法：
--primary: #ff6b35;+--alpha: 80;→ 试图拼接var(--primary)var(--alpha)，CSS 不支持字符串拼接 - 更稳方案：拆成
--primary-r: 255、--primary-g: 107、--primary-b: 53、--primary-alpha: 0.5，再用rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha))
真正容易被忽略的是：八位色值一旦出错，既不报错也不提示，只默默失效——盯住那 8 个字符，比查文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
