旧版浏览器如IE8、iOS 12 Safari等遇到rgba()会静默丢弃整条声明，必须前置十六进制fallback、后置rgba()覆盖，依赖CSS层叠降级；顺序错误或缺失fallback将导致颜色失效，且@supports不被IE8识别。
旧版浏览器（IE8、iOS 12 Safari、Android 4.4 WebView 等）遇到 rgba() 会静默丢弃整条声明，不是变灰、不是报错，是直接“看不见”——没写 fallback，颜色就真没了。
必须前置十六进制 fallback，后置 rgba() 覆盖
老浏览器只认它认识的语法，CSS 层叠是唯一能依赖的降级机制。顺序错了，fallback 就不生效。
-
background-color: #000;必须写在前面，IE8 才能解析并应用 -
background-color: rgba(0, 0, 0, 0.5);写在后面，现代浏览器覆盖前一行 - 绝对不要用
@supports包裹rgba()：IE8 完全不识别该规则，整个块被跳过 - 如果用了
background简写（如带图片），要完整重写两遍：background: #f0f0f0 url("bg.png") repeat;和background: rgba(240, 240, 240, 0.6) url("bg.png") repeat;，否则背景图会被清掉
rgba() 参数格式必须严格符合旧引擎要求
不是写了 rgba() 就安全，Chrome 6–12、IE8 等对空格、单位、数值范围极其敏感。
- 逗号后不能有空格：
rgba(255,107,53,0.5)✅；rgba(255, 107, 53, 0.5)❌（Chrome 6–12 报错） - RGB 必须用整数，不用百分比：
rgba(255,107,53,0.5)✅；rgba(100%,42%,21%,0.5)❌（Chrome 13 前不支持） - alpha 必须是 0–1 的小数：
rgba(0,0,0,0.3)✅；rgba(0,0,0,30%)或rgba(0,0,0,30)❌ - 设计稿给的是
#3a86ff + 60%，别心算，直接转成rgba(58,134,255,0.6)，数值必须与十六进制 fallback 严格对齐
IE8 需额外加 gradient 滤镜模拟透明
仅靠 rgba() + 十六进制 fallback 不够：IE8 下背景仍可能实心。必须用 filter: progid:DXImageTransform.Microsoft.gradient 补足半透效果，且它和 background-color 是共存关系，不是替代。
- 写法：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); -
#7f000000中前两位7f是透明度（0.5 × 255 = 127 →7f），后六位是 RGB，必须跟你要的rgb()值一致 - alpha 换算不能四舍五入，必须
Math.round(alpha * 255).toString(16).padStart(2, '0')，比如 0.33 →54，不是53或55 - 该滤镜会强制触发 hasLayout，可能影响盒模型（如高度塌陷、定位偏移），尤其在
position: fixed遮罩层中务必实测滚动行为
别信眼见为实，验证必须看 DevTools 的 Computed 值
页面看起来“颜色对了”，不代表 rgba() 或 #RRGGBBAA 被正确解析。很多情况下只是 fallback 在起作用。
- 打开 Chrome DevTools 的 Styles 面板，确认那行
rgba()没被划掉（即未被标记为无效） - 切到 Computed 标签页，查
background-color的最终计算值是否匹配预期（例如是否显示为rgba(0, 0, 0, 0.5)） - 在 iOS 12 Safari 或 Android 4.4 WebView 中，即使样式面板显示正常，也要真机截图比对——它们对
hsl()缺少%单位等小问题极其敏感
真正容易被忽略的不是怎么写语法，而是：滤镜是否触发 hasLayout、透明度换算有没有舍入误差、背景图是否被连带变淡、以及 IE 默认兼容模式可能让 IE9 也跑成 IE8 内核——这些细节漏掉一个，页面就在 XP 机器上裂开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
