rgba()在iOS Safari和Android Chrome中基本可靠，但iOS 8等旧版本在border-color、outline等属性中存在渲染异常；#RRGGBBAA仅限较新系统支持；opacity会导致子元素一同变透明，应优先用rgba()控制颜色透明度。
rgba() 在 iOS Safari 和 Android Chrome 中是否可靠
rgba() 是最常用且兼容性最好的透明颜色方案，现代手机浏览器（iOS 10+、Android Chrome 50+）全部支持。但要注意：早期 iOS Safari（如 iOS 8）对 rgba() 在某些 CSS 属性中存在渲染异常，比如用在 border-color 或 outline 上可能被忽略或转为不透明色。
- 优先用于
background-color和color，这两者在所有主流移动浏览器中表现一致 - 避免在
box-shadow的 color 部分单独写rgba(0,0,0,0.2)后再叠加其他 shadow；部分旧版 WebView 会截断后续 shadow - 测试时务必真机检查——模拟器有时会掩盖亚像素渲染导致的“半透明发灰”问题
十六进制带透明度写法（#RRGGBBAA）的兼容边界
#RRGGBBAA 写法简洁，但支持度有明显断层：Android Chrome 79+、Firefox for Android 92+、Safari 14+（iOS 14+）才开始支持。低于这些版本会直接忽略整条声明，退回到无样式或继承色。
- 不能替代
rgba()作为基础方案，仅适合已明确目标用户系统版本的场景（如企业内网 App） - 注意大小写无关，但
#ff000080和#FF000080效果相同；#f008（简写）不被任何移动端浏览器支持 - 和
rgba()不同，它无法通过 JavaScript 动态计算透明度（element.style.backgroundColor = `#ff0000${alphaHex}`会出错），必须预先生成完整值
opacity 导致子元素一起变透明怎么办
opacity 作用于整个元素及其所有后代，这是它和颜色级透明（如 rgba()）的根本区别。在移动端做局部遮罩、按钮悬浮态或卡片投影时，误用 opacity 常导致文字也变淡、交互反馈失效。
- 改用
background-color: rgba(255, 255, 255, 0.8)替代opacity: 0.8实现背景透出，文字保持 100% 不透明 - 若必须用
opacity（例如淡入动画），请确保该元素没有需要高对比度的文本子节点；否则需额外包裹一层并重置opacity: 1 - 某些低端 Android WebViews 对
opacity动画有性能抖动，建议配合will-change: opacity或改用transform: translateZ(0)触发硬件加速
透明渐变在移动端 fallback 方案怎么写
CSS 渐变本身支持透明色 stop，但旧版移动浏览器（尤其是 Android 4.x 系统自带浏览器）不识别 transparent 关键字或 rgba() stop，会直接丢弃整个 background-image: linear-gradient(...) 声明。
立即学习“前端免费学习笔记（深入）”；
background: #f0f0f0; /* fallback solid color */ background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
- 必须写两遍
background：第一行为纯色 fallback，第二行为带透明 stop 的渐变 - 不要用
transparent，统一用rgba(255,255,255,0)—— 更多旧 WebView 能识别后者 - 渐变方向推荐用标准语法
to bottom，避免top这类老式关键字，后者在部分 Android 4.4 WebView 中解析失败
实际项目里最容易被忽略的是：透明色在深色模式下可能完全不可见（比如 rgba(0,0,0,0.1) 在黑色背景上等于全黑），而这点在开发阶段用浅色主题预览根本看不出来。
