rgba()的alpha值必须为0–1小数，非百分比或整数；仅作用于单个颜色属性，与元素级opacity有本质区别；IE8需fallback方案。
rgba() 函数里 alpha 值不是百分比，是 0–1 的小数
很多人写 rgba(255, 0, 0, 50%) 或 rgba(255, 0, 0, 50)，结果透明度完全不生效——浏览器直接忽略整条声明。这是因为 rgba() 第四个参数（alpha）只接受 0 到 1 之间的数字，不支持百分比、整数或字符串。
常见错误现象：background-color: rgba(0, 0, 0, 0.3) 有效，但换成 0.30、"0.3"、30% 都会失效；部分旧版 Safari 对 0. 开头的写法（如 0.3）兼容性略差，建议统一写成带前导零的 0.3。
-
0表示完全透明（看不见），1表示完全不透明（等价于rgb()） - 想实现 70% 不透明（即 30% 透明），就用
0.7，不是0.3 - 小数位数不影响渲染，
0.7和0.700效果一致，但前者更简洁
rgba() 和 opacity 的透明行为有本质区别
用 rgba() 改颜色透明度，只影响该颜色本身；而 opacity 会让整个元素（包括子元素、边框、文字）一起变透明。这是最容易混淆、也最常引发 UI bug 的点。
使用场景举例：给按钮加半透背景，但希望文字保持清晰可读——必须用 background-color: rgba(0, 0, 0, 0.1)，不能用 opacity: 0.1，否则文字也会淡得看不清。
立即学习“前端免费学习笔记（深入）”；
-
rgba()只作用于单个颜色属性（color、background-color、border-color等） -
opacity是元素级属性，会“穿透”到所有后代节点 - 性能上，
opacity可能触发合成层（layer），而rgba()通常不会，对动画更友好
IE8 及更早版本不支持 rgba()，但有简单 fallback 方案
如果你的项目还需兼容 IE8，直接写 rgba() 会导致背景/文字消失——IE8 完全不认识这个函数，会丢弃整条样式声明。不能靠“多写一行 rgb()”来兜底，因为 CSS 解析器遇到无效声明会跳过整条规则。
正确做法是利用 CSS 的“后声明覆盖前声明”特性，把不透明的版本写在前面，rgba() 写在后面：
button {
background-color: #000; /* IE8 及以下看到这个 */
background-color: rgba(0, 0, 0, 0.2); /* 支持 rgba 的浏览器覆盖上一行 */
}- 不要用
@supports (color: rgba(0,0,0,0))做检测——IE8 不支持@supports - 渐变中嵌套
rgba()（如linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5))）在 IE10+ 才可靠，IE9 仅部分支持 - 如果必须支持 IE8 且需要半透效果，只能用 PNG 背景图替代
用 rgba() 做文字阴影（text-shadow）时 alpha 控制的是阴影本身
写 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)，那个 0.3 控制的是阴影的不透明度，不是文字的。文字本体仍由 color 决定，两者互不影响。
容易踩的坑：有人以为调低 text-shadow 的 alpha 就能让文字“变淡”，结果发现文字本身还是实的，只是阴影虚了——这是正常行为，不是 bug。
- 要让文字半透，请单独设置
color: rgba(0, 0, 0, 0.6) - 阴影的 blur 半径（第三个值）越大，alpha 越低，阴影越“飘”，但别设成
0.01这种极小值，渲染可能不稳定 - 多个阴影叠加时（如
text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.1)），每个都需独立指定 alpha
真正要注意的是：rgba() 的 alpha 是颜色通道的一部分，它和 opacity 的语义层级完全不同。改错地方，UI 就会出意料之外的“透”或者“不透”。
