CSS里的rgb颜色如何写百分比

rgb()声明必须单位统一且空格分隔：全整数（逗号可选）或全百分比（仅空格），混用则整条失效；百分比线性映射0–255并四舍五入；alpha仅支持0–1小数且写法须匹配通道语法。

可以写，但必须用空格分隔、单位统一、不能混用整数和百分比——否则整条 rgb() 声明会被浏览器静默丢弃，开发者工具里显示为划掉，控制台不报错也不警告。

rgb() 百分比必须用空格，不能加逗号

CSS Color Level 4 规范中，只有空格分隔的 rgb(r g b) 或 rgb(r g b / a) 才支持百分比；旧式逗号分隔（如 rgb(100%, 50%, 0%)）在所有浏览器里都只认整数，百分比直接被当非法值跳过。

1. rgb(100% 50% 0%) ✅ 合法，等价于 rgb(255 128 0)
2. rgb(100%, 50%, 0%) ❌ 无效，整条规则被忽略
3. rgb(100% 50% 0% / 0.6) ✅ 支持 alpha，Chrome 93+、Firefox 95+、Safari 15.4+ 可用

三个通道单位必须完全一致

只要有一个是百分比、另一个是整数（比如 rgb(100% 128 0)），解析器会立刻放弃整条声明，颜色回退到继承值或默认色。这不是兼容性问题，而是语法硬限制。

1. ✅ 全整数：rgb(255, 128, 0)（逗号分隔也 OK）
2. ✅ 全百分比：rgb(100% 50% 0%)（必须空格）
3. ❌ 混用：rgb(255, 50%, 0%)、rgb(100% 128 0%)、rgb(100% 50 0%)

百分比不是“混合比例”，而是线性映射到 0–255

rgb(25% 50% 75%) 不代表“25% 红 + 50% 绿 + 75% 蓝”的视觉混合效果，它只是把百分比换算成整数：25% → 63.75 → 四舍五入为 64，50% → 127.5 → 四舍五入为 128（不是 127），75% → 191.25 → 191。最终渲染的是 rgb(64 128 191)。

1. 1% ≈ 2.55，rgb(1% 1% 1%) 渲染为 rgb(3 3 3)
2. 想按权重混合两种颜色？该用 color-mix()，不是硬套 rgb()
3. 预处理器（如 Sass）或 JS 动态拼接时，rgb(${r} ${g} ${b}) 中的 r、g、b 必须类型一致——要么全是数字，要么全是带 % 的字符串

alpha 不支持百分比，且写法必须匹配语法

rgba() 的第四个参数（alpha）只接受 0–1 的小数，不支持 50% 这种写法。而且，alpha 的写法必须和前面通道的语法一致：

1. ✅ rgba(100% 50% 0% / 0.6)（现代空格语法 + 小数 alpha）
2. ✅ rgba(255, 128, 0, 0.6)（传统逗号语法 + 小数 alpha）
3. ❌ rgba(100%, 50%, 0%, 60%)（逗号 + 百分比 alpha）
4. ❌ rgb(100%, 50%, 0%, 0.6)（rgb() 只接受三个参数，第四个直接超限）

最容易被忽略的点是：无效的 rgb() 声明不会触发任何错误提示，只会在开发者工具的 Styles 面板里被划掉。检查颜色没生效时，第一反应不该是改浏览器或清缓存，而是打开 computed 值看实际渲染出的颜色，再回头核对空格/逗号、单位一致性、alpha 写法。