rgb()参数超出0–255或0%–100%范围会静默失效，整条声明被丢弃，devtools中显示删除线且computed中不可见；需用clamp()在js层预处理确保数值合规。
rgb()参数超出0–255范围会静默失效
浏览器不会报错，但整个rgb()声明会被丢弃——DevTools里那行样式直接灰掉带删除线，computed中也找不到对应颜色。常见越界写法：rgb(256, 0, 0)、rgb(-10, 100, 200)、rgb(300%, 50%, 20%)（百分比超100%也无效）。数值必须严格落在0–255整数或0%–100%区间内，且三者类型一致。
用clamp()函数在JS中预处理RGB值
前端动态生成颜色时，别依赖CSS自动截断——它不截断，只丢弃。应在JS层做安全校验：
const clamp = n => Math.max(0, Math.min(255, Math.round(n)));
const safeRgb = (r, g, b) => `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`;
-
clamp()确保输入先四舍五入再约束到[0, 255] - 避免
parseInt("255.7")这种截断操作，它会丢掉小数部分却不报错 - 若原始数据来自设计稿API或用户输入，务必过一遍
clamp()再塞进CSS
rgba()第四个参数alpha不能写成百分比或整数
rgba()的alpha通道只接受0–1之间的小数，写成rgba(0,0,0,50%)或rgba(0,0,0,50)都会让整个声明失效。这个限制和RGB通道无关，是独立规则：
- ✅ 正确：
rgba(0, 0, 0, 0.5)、rgba(0, 0, 0, 1) - ❌ 错误：
rgba(0, 0, 0, 50%)、rgba(0, 0, 0, 0.5%)、rgba(0, 0, 0, 50) - 注意：空格可选，但逗号后不能跟中文符号或全角空格
渐变中RGB越界会导致色差放大
在linear-gradient()里用越界RGB，不仅本体失效，还会干扰插值路径——尤其当起始色和结束色一个越界一个正常时，Safari可能把越界色当成透明或默认黑，Chrome则直接跳过该色标。更隐蔽的问题是：
- 即使两个RGB都“合法”，若其中一个用了百分比、另一个用了整数（如
rgb(100%, 50, 200)），整个渐变在Firefox中可能渲染异常 - 推荐统一用空格分隔语法：
rgb(255 107 107)，它对越界值更敏感（部分引擎会直接报错而非静默丢弃） - 用
@supports (color: rgb(0 0 0))检测现代RGB支持，比检查渐变语法更能反映实际渲染能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
