rgb()百分比写法需用空格分隔且遵循现代语法，如rgb(100% 50% 0%)合法，等价于rgb(255 128 0)；逗号分隔如rgb(100%, 50%, 0%)无效，整条声明被浏览器静默丢弃。
rgb() 函数支持百分比，但不是“按比例混合颜色”，而是把 0%–100% 映射到 0–255 数值区间；混用单位或写错语法会直接导致整条声明失效，浏览器静默丢弃。
rgb() 百分比写法必须用空格分隔，不能加逗号
CSS Color Level 4 规范里，rgb() 支持百分比的前提是使用现代语法：rgb(r g b) 或 rgb(r g b / a)，中间用空格、无逗号。旧式逗号分隔写法（如 rgb(100%, 50%, 0%)）在所有浏览器中仍只认整数，百分比会被当作非法值。
-
rgb(100% 50% 0%)✅ 合法，等价于rgb(255 128 0) -
rgb(100%, 50%, 0%)❌ 无效，整条规则被忽略 -
rgb(100% 50% 0% / 0.6)✅ 支持透明度，Chrome 93+、Firefox 95+、Safari 15.4+ 可用 - IE 和旧版 Safari（
百分比 ≠ 颜色混合比例，只是数值缩放映射
写 rgb(25% 50% 75%) 并不表示“四分之一红 + 一半绿 + 四分之三蓝”的混合效果，它只是把 25% → 64、50% → 128、75% → 191，最终渲染的是 rgb(64 128 191) —— 一个偏蓝的灰调，和直觉中的“比例控制”无关。
- 100% 恒等于 255，50% 恒等于 128（非 127.5，向下取整）
- 1% ≈ 2.55，实际计算时浏览器会四舍五入为整数，
rgb(1% 1% 1%)渲染为rgb(3 3 3) - 想真正按权重混合两种颜色？该用
color-mix()，不是rgb()
混用单位会导致整个 rgb() 声明失效
只要三个参数中有一个是百分比、另一个是整数，比如 rgb(255, 50%, 128)，浏览器解析器会立刻放弃整条声明，不报错、不警告，CSS 属性在开发者工具里显示为划掉（strikethrough），颜色回退到继承值或默认色。
- 检查方式：打开 DevTools → Elements → Styles，看
color或background-color是否被划掉 - 预处理器（如 Sass）里做转换更安全：
rgb($r * 2.55, $g * 2.55, $b * 2.55) - 动态 JS 拼接时务必统一类型：
rgb(${r} ${g} ${b})中r、g、b要么全是数字，要么全是带%的字符串
需要真·比例混合？换 color-mix()，别硬套 rgb()
color-mix() 才是 CSS 中唯一原生支持“按百分比混合颜色”的函数，语法明确、语义清晰，且能跨色彩空间工作。它不是 rgb() 的增强，而是独立的新能力。
-
color-mix(in srgb, red 30%, blue 70%)→ 红蓝按权重混合，结果可预测 - 两个百分比加起来必须为 100%，不支持单色提亮/降暗（那得用
oklch()或color()） - 兼容性：Chrome 111+、Safari 16.4+、Firefox 119+；旧浏览器必须写 fallback：
color: blue; color: color-mix(in srgb, red 30%, blue 70%); - 注意：
color-mix()不接受变量插值，color-mix(in srgb, var(--c1) 50%, var(--c2) 50%)无效
真正容易被忽略的是：百分比在 rgb() 里只是数值映射的语法糖，不是设计意义上的“比例”。写 rgb(80% 20% 10%) 看着像强调红色，但实际是 rgb(204 51 26) —— 一个暗棕红，和你脑中“80% 红”可能完全不同。动手前，先确认你到底要的是“数值缩放”还是“颜色混合”，选错函数，后面全白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
