rrggbbaa语法在旧浏览器中被完全忽略，chrome 112/safari 16.4前、ie、微信webview等均不支持；格式容错极低，大小写、空格、引号或位数错误均导致整条声明静默失效；工具链需显式配置才支持；极低透明度值在低端设备上可能归零，稳定水印建议用03并配合blur。
旧浏览器根本不认识#RRGGBBAA语法
不是解析错、不是渲染异常，是直接跳过整条声明——Chrome 112 之前、Safari 16.4 之前、所有 IE（包括 IE11）、微信小程序 WebView、旧版 Electron、Android UC 内核等，压根没有实现 CSS Color Module Level 4 的 #RRGGBBAA 解析器。你写 background-color: #00000003;，它们就当这行 CSS 不存在，回退到父级背景或默认色。
#RRGGBBAA写法稍有偏差就会静默失效
现代浏览器对格式校验极严，错一位、大小写混、加空格或引号，整条声明就被丢弃，且不报错：
-
#ff6b6b80✅ 正确：8 字符、全小写、无分隔 -
"#ff6b6b80"❌ 引号 → 当字符串字面量，color: var(--c)直接失败 -
#ff6b6b 80❌ 空格 → 解析中断，整条被忽略 -
#FF6B6B80❌ 大写 → 部分 Android WebView（如 Android 10 系统 WebView）拒绝识别 -
#0000003❌ 少一位 → 不是 8 位即无效
工具链和构建环境也会“吃掉”#RRGGBBAA
很多前端基础设施默认不支持该语法，除非显式启用：
- PostCSS 默认不识别
#RRGGBBAA，需加postcss-color-function或postcss-hexrgba - Stylelint 会标红并报
color-no-invalid-hex，需禁用该规则或升级插件 - Tailwind 的
content扫描可能漏掉 8 位 HEX，导致生成的 CSS 中缺失对应类名 - Webpack + css-loader 若未配 PostCSS 插件，
#007bff80会被原样输出，然后在旧环境里失效
透明度值本身在低端设备上不可靠
即使语法正确、浏览器支持，#00000001 这类极低透明度值仍可能彻底不可见：
- 某些低端 Android 屏幕 Alpha 通道只有 4 位精度（0–15），
01被截断为00 - 抗锯齿和 subpixel 渲染会稀释本就微弱的灰度，尤其在浅色背景上
- 设计师说的 “0.5% 透明度” 在 CSS 里只能取整到
01或02，没有中间态——要么归零，要么勉强可见 - 真正稳定露出水印的底线通常是
03（≈1.2% 不透明），再配合filter: blur(0.5px)提升感知，但注意重绘开销
实际项目中，最易被忽略的是：你以为加了 fallback 就万事大吉，但若顺序写反（#RRGGBBAA 在前、rgba() 在后），旧浏览器连 fallback 都读不到；而 JS 动态拼字符串时，把 0.01 直接乘 100 得到 01，看似对，实则应是 Math.round(0.01 * 255).toString(16).padStart(2, '0') → 03。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
