rgb()参数须为0–255整数或0%–100%百分比，越界则整条声明失效；rgba()的alpha限0–1；css变量与calc()不可直接用于rgb()；其默认srgb空间导致跨设备显示差异。
rgb() 函数的参数范围和常见越界错误
rgb() 接收三个 0–255 的整数，或 0%–100% 的百分比值，超出即失效——浏览器会静默忽略整个声明，而不是取模或截断。比如 rgb(256, 0, 0) 不显示红色，而是回退到继承色或默认色。
常见错误现象：color: rgb(300, 50, 50); 看起来没生效；调试时检查 computed 样式发现该属性被划掉（invalid）。
- 用整数时务必确认在
0–255闭区间内，-1和256都非法 - 用百分比时注意空格：
rgb(100%, 0%, 0%)合法，rgb(100%,0%,0%)也合法（CSS 允许省略空格），但rgb(100%,0%, 0)混用单位会整体失效 - JavaScript 动态拼接时容易漏掉单位或类型转换出错，例如
rgb(${r}, ${g}, ${b})中若r是字符串"256"就危险
rgb() 与 rgba() 的透明度陷阱
rgba() 第四个参数是 alpha，取值范围是 0–1（非百分比），不是 0–100。写成 rgba(255, 0, 0, 50) 或 rgba(255, 0, 0, 50%) 都无效，会导致整条规则被丢弃。
使用场景：需要覆盖背景又不想影响子元素文字颜色时，优先用 rgba() 而非 opacity——后者会让整个元素及其后代一起变透明。
立即学习“前端免费学习笔记（深入）”；
-
rgba(0, 0, 0, 0.7)表示 70% 不透明度（即 30% 透明），不是“70% 透明” - alpha 值为
0时完全透明，此时红绿蓝值无视觉意义，但语法上仍需提供（不能省略） - IE8 及更早版本不支持
rgba()，如需兼容，得配filter: progid:DXImageTransform.Microsoft.gradient(...)或降级为半透 png
rgb() 在 CSS 变量和 calc() 中的限制
CSS 自定义属性无法直接存 rgb 数值三元组，--main-rgb: 255, 0, 0; 是非法的——变量值必须是字符串，而 rgb() 函数本身不接受变量插值（直到 color-mix() 和 color() 在较新浏览器中落地）。
想动态计算颜色？别硬套 calc() 进 rgb()：像 rgb(calc(255 - 10), 0, 0) 语法错误，rgb() 内部不解析 calc()。
- 可行方案：用
hsl()+calc()更安全，比如hsl(calc(0 + var(--hue)), 100%, 50%) - 或用 JS 计算好再注入 style：
el.style.backgroundColor = `rgb(${r}, ${g}, ${b})` - 现代替代：Chrome 111+ / Safari 16.4+ 支持
color(display-p3 ...)和color-mix(in srgb, ...)，但 rgb() 本身没进化
rgb() 的渲染一致性与设备色彩空间
rgb() 默认工作在 sRGB 色彩空间，这是绝大多数屏幕的基准，但不等于“所有屏幕显示一样”。同一组 rgb(255, 0, 0) 在 OLED 屏上可能比 IPS 屏更艳，这不是 bug，是硬件差异。
真正影响一致性的点在于：没有指定色彩配置文件时，浏览器按 sRGB 解释，但若图片带 Display P3 配置，而 CSS rgb() 仍走 sRGB，两者并存时会出现色差。
- 设计系统中若要求高保真，应统一使用
color(display-p3 ...)并确保内容环境支持 - 避免在
rgb()和图片之间做像素级对齐比色——尤其红色/绿色高饱和区域 - 开发阶段用浏览器 devtools 的颜色拾取器看“实际输出值”，它会显示当前渲染使用的色彩空间和转换后数值
事情说清了就结束。rgb() 看似简单，但越界、单位混用、变量穿透、色彩空间错位，这四点最容易在上线前一刻才暴露。
