IE8及更早版本会整条丢弃rgba()声明，必须前置纯色fallback；iOS12 Safari中渐变内rgba()渲染为黑块，应改用transparent或8位HEX；Backdrop-filter搭配rgba()需谨慎选值并双写@supports。
IE8 及更早版本会直接丢弃 rgba() 声明，不是变淡，是整条规则失效——所以回退必须写在它前面、同一选择器内、且不能被简写覆盖。
RGBA 必须前置纯色 fallback 才生效
旧版浏览器（IE6–8、部分 QQ 浏览器内核）遇到不认识的 rgba() 语法，会跳过整条声明。这意味着如果你只写：
button { background-color: rgba(74, 111, 165, 0.8); }
在 IE8 里背景可能完全透明或继承父级颜色，文字糊成一片。
- 正确做法：在同一选择器中，先写兼容性无争议的值，再覆盖
rgba() - 顺序不能反——
background-color: #4a6fa5;必须在background-color: rgba(74, 111, 165, 0.8);之前 - 别用
background简写覆盖已有背景图，它会清掉background-image；改用完整拼接：background: rgba(240, 240, 240, 0.6) url("bg.png") repeat;
IE8 需要手写 filter: alpha(opacity=) 补丁
PostCSS 和 Autoprefixer 早已移除对 filter: alpha(opacity=) 的自动补全。若仍需支持 IE8，必须手动加，并注意三点：
立即学习“前端免费学习笔记（深入）”；
-
opacity是 0–100 的整数，不是小数：filter: alpha(opacity=30);✅，filter: alpha(opacity=0.3);❌ - 只对块级元素生效，行内元素要加
display: inline-block或zoom: 1 - 它作用于整个元素及其子树，和
rgba()语义不同，不能互换——比如文字也会变淡
iOS 12 Safari 渐变中 rgba() 渲染为黑块
在 linear-gradient() 或 radial-gradient() 中写 rgba(0,0,0,0.3)，iOS 12 Safari 会直接画成纯黑，不是透明，也不报错。
- 安全写法只有两个：
transparent（如linear-gradient(to right, #000, transparent)）或 8 位 HEX（#0000004D） -
@supports (background: rgba(0,0,0,0))在 iOS 12 根本不支持，无法用于隔离 - 必须双写前缀：
-webkit-linear-gradient()+linear-gradient()，且顺序不能错
Backdrop-filter 搭配 rgba() 时的降级陷阱
毛玻璃效果常组合 backdrop-filter: blur(4px) 和 background-color: rgba(255,255,255,0.1)，但降级色选错就失去层次感：
- 文字卡片推荐起点值：
rgba(255,255,255,0.12)；模态框用rgba(255,255,255,0.08) - 深色背景上改用
rgba(0,0,0,0.05)～rgba(0,0,0,0.1)，避免发青或发灰 - @supports 内必须同时重写
background-color和backdrop-filter，否则层叠冲突导致降级失效 - 父容器
overflow: hidden是隐形杀手——模糊区域会被裁剪，需确保留出足够 padding 或设为visible
真正容易被忽略的是：alpha 值低于 0.05 时，多数人肉眼已难分辨差异；而高于 0.2 后，降级层就开始“吃掉”设计稿里的通透感——这个阈值需要在真机上反复比对，不是靠计算出来的。
