rgba()参数顺序为红、绿、蓝、透明度，前三个为0–255或0%–100%，alpha必须为0–1小数；仅作用于颜色本身，不继承，不可与hsla或HEXA混用，需为渐变提供不支持rgba的fallback。
rgba() 函数的参数顺序和取值范围必须严格匹配
rgba() 接收四个参数：rgba(red, green, blue, alpha)，前三个是 0–255 的整数（或 0%–100% 的百分比），第四个 alpha 是 0–1 的小数，**不能写成百分比或整数**。常见错误是把透明度写成 0.5% 或 50，这会导致整个声明无效，浏览器会回退到默认色或忽略该样式。
例如：
color: rgba(255, 165, 0, 0.3); /* ✅ 正确：橙色，30% 不透明（即 70% 透明） */ color: rgba(255, 165, 0, 30%); /* ❌ 无效：alpha 不支持百分比 */ color: rgba(255, 165, 0, 30); /* ❌ 无效：alpha 超出 0–1 范围 */
rgba 与 opacity 的关键区别：继承与作用范围
rgba() 只影响**颜色本身**（如文字、边框、背景色），而 opacity 作用于整个元素及其所有子元素。如果你只想让背景半透、文字保持不透明，必须用 background-color: rgba(...)，而不是给容器设 opacity —— 后者会让里面的文字、图标也变淡，还可能引发可访问性问题。
- ✅ 推荐：背景半透 + 文字清晰 →
background-color: rgba(0, 0, 0, 0.1); color: #333; - ❌ 避免：同一容器下用
opacity: 0.1→ 子元素文字同样难以辨认 - ⚠️ 注意：
rgba()无法用于border-color以外的边框属性（如border-width），但border-color: rgba(0,0,0,0.2)是完全合法的
在 background-image 与渐变中混用 rgba 很容易漏掉 fallback
CSS 渐变（linear-gradient）里可以直接用 rgba 颜色点，比如 background: linear-gradient(to right, rgba(255,0,0,0.2), rgba(0,0,255,0.2));。但老版本浏览器（如 IE9 及更早）不支持 rgba，也不支持现代渐变语法。如果设计上依赖透明叠加效果，又需要兼容旧环境，就得提供不带透明的纯色 fallback：
立即学习“前端免费学习笔记（深入）”；
background-color: #ff0000; /* IE8 及以下 fallback */ background: linear-gradient(to right, rgba(255,0,0,0.2), rgba(0,0,255,0.2));
否则在不支持 rgba 的环境里，背景可能直接变空或显示父级颜色，造成视觉断裂。
rgba 值在 HSLA、HEXA 等其他透明色格式中不可互换
rgba() 是独立语法，不能和 hsla() 混用参数，也不能把十六进制色加 alpha 通道后直接当 rgba 用（比如 #ff000080 是 HEXA 格式，不是 rgba）。浏览器解析时会严格按函数名匹配规则——写成 rgba(255,0,0,0.5) 就不会被当作 hsla(0,100%,50%,0.5) 处理，二者色相/饱和度表现也可能不同。
实际选型建议：
- 需精确控制红绿蓝分量（如从设计稿取色）→ 用
rgba() - 需按直觉调整色相、明暗（如“再亮一点”“偏蓝些”）→ 用
hsla() - 已有带 alpha 的十六进制（如 Sketch 导出的
#0000001a）→ 确保浏览器支持 HEXA（Chrome 119+、Firefox 119+），否则仍要转成rgba()或hsla()
透明度数值本身没有性能开销，但过度嵌套 rgba 背景叠加（比如 5 层半透 div 叠在一起）可能在低端设备上触发重绘延迟，这种场景更适合用单层带模糊/遮罩的 SVG 或 canvas 实现。
