rgb()适用于无需透明度的纯色场景，仅支持三参数（0–255或百分比），不支持alpha；rgba()则通过第四参数控制元素自身透明度而不影响子元素，但旧IE不支持，且需避免误用于文字或全局透明。
rgb() 适合不需要透明度的纯色场景
当你要定义一个完全不透明的颜色，比如按钮背景、文字颜色或边框色，且明确不需要任何透明效果时，rgb() 是更简洁、语义更清晰的选择。它只接受三个参数：rgb(r, g, b)，取值范围都是 0–255 或百分比（如 rgb(100%, 50%, 0%)）。
常见错误是误以为 rgb() 能设透明度——它不能。如果写了 rgb(255, 0, 0, 0.5)，浏览器会直接忽略整条声明，导致样式失效。
- 兼容性极好，所有支持 CSS 的浏览器都支持
rgb() - 在需要精确控制色值又无需 alpha 通道的场合（如 SVG 填充、CSS 变量初始值）更安全
- 与
hsl()或十六进制对比，rgb()更适合程序动态拼接（例如从 Canvas 获取像素值后直接复用）
rgba() 用于需要局部透明但又不想影响子元素的覆盖层
rgba() 是 rgb() 的扩展，第四个参数 a（alpha）控制透明度，取值范围是 0–1（0 完全透明，1 完全不透明）。它最典型的应用是：给某个元素自身加透明底色，同时保持其内容（文字、子元素）不透明。
button {
background-color: rgba(0, 128, 255, 0.2);
color: #333;
}
上面这段代码让按钮背景半透，但文字依然清晰可读——这是用 opacity 实现不了的（opacity 会让整个元素及其子元素一起变透明）。
- 避免用
rgba()给文字设透明色（比如color: rgba(0,0,0,0.7)），虽然合法，但可访问性差；优先考虑
用
color配合足够对比度的不透明色 - 在 CSS 变量中使用
rgba()要小心：无法单独修改 alpha 值，不如分开存--r、--g、--b、--a然后用rgb(var(--r), var(--g), var(--b) / var(--a))（需现代语法支持） - 旧版 IE（≤8）不支持
rgba()，如需兼容，得配filter: progid:DXImageTransform.Microsoft.gradient或降级为半透 PNG
什么时候不该用 rgba() —— 混淆了“背景透明”和“元素透明”
一个高频误用场景：想让卡片半透明，却对整个卡片容器设 rgba() 背景 + opacity: 0.8。这会导致内部所有内容（包括文字、图标、输入框）也变模糊，交互体验下降。
正确做法是只用 background-color: rgba(...)，确保透明仅作用于背景层。
- 若父容器用了
rgba()，子元素继承的只是计算后的颜色值，不会“叠加”透明度 -
rgba(0,0,0,0.1)和rgba(0,0,0,0.2)并非线性叠加关系，视觉上后者不是前者的两倍灰度——透明度混合受底层颜色影响，实际效果需预览 - 动画中频繁修改
rgba()的 alpha 值（如 hover 渐变）性能尚可，但比改opacity稍重，因涉及重绘而非单纯图层合成
现代替代方案：color-mix() 和 rgb(r g b / a) 新语法
CSS Color Level 4 引入了更灵活的写法：rgb(0 0 0 / 0.5)，斜杠分隔色值与 alpha。它和 rgba() 功能一致，但更易读、支持空格分隔，也便于未来扩展（比如支持色彩空间标识）。
另外，color-mix() 可以实现基于透明度的混合逻辑，比如 color-mix(in srgb, red 70%, transparent 30%)，但它不是替代 rgba()，而是解决“按比例混合两种颜色”的新需求。
- 新语法
rgb(r g b / a)在 Chrome 111+、Firefox 110+、Safari 16.4+ 支持，但不支持 IE 和旧安卓 WebView - 不要为了用新语法而放弃可维护性：团队里有人还在调
rgba()，突然切到斜杠写法可能引发协作混淆 - 真正容易被忽略的是：无论用哪种写法，透明色在深色模式下可能对比度不足——务必用 DevTools 的“Contrast ratio”检查可访问性
