hsl(390, 100%, 50%)实际渲染为hsl(30, 100%, 50%)，因浏览器按css颜色模块level 4规范静默执行390 % 360 = 30的归一化处理，不报错、不警告，直接修正后渲染。
因为 CSS 规范明确要求对 hsl() 的色相参数做模 360 处理，超出范围的值会被自动归一化——不是“能生效”，而是浏览器强制把它变成合法值。
hsl(390, 100%, 50%) 实际渲染的是什么？
它等价于 hsl(30, 100%, 50%)（因为 390 % 360 === 30）。浏览器在解析时会静默执行这个模运算，不报错、不警告，直接修正后渲染。你写 hsl(1000, 100%, 50%)，最终也是 hsl(280, 100%, 50%)（1000 % 360 = 280）。
- 这个行为是 CSS 颜色模块 Level 4 的正式要求，所有现代浏览器都遵守
- 负数也一样：
hsl(-30, 100%, 50%)→hsl(330, 100%, 50%)（((-30 % 360) + 360) % 360） - 但注意：CSS 原生不支持表达式，
hsl(calc(180 + 200), 100%, 50%)直接无效，不会计算也不会归一化
为什么动画里要写 720 而不是 360？
写 0% { --hue: 0 } → 100% { --hue: 360 } 会导致动画卡死或跳变，因为起点和终点被归一化为同一值（都是 0°），浏览器认为无需过渡。
- 必须跨整圈：写
720让插值器看到“从 0 到 720”，中间帧自然落在 0–720 区间，再经模 360 后形成完整两圈流动 - 只靠 CSS 自动归一化不够——它只修单个值，不保证动画路径连续
- 如果用 JS 动态生成，也要自己做
((h + 360) % 360)，不能依赖浏览器“帮你兜底”
哪些场景下“超 360”会出问题？
表面看它总能归一化，但实际踩坑点不少：
- JS 计算互补色写成
h + 180然后直接塞进 CSS，比如h = 270→450→ 浏览器归一成90，但你本意可能是60（270+180=450→450%360=90，而 270+180 应该是 60？不对，270+180=450，450%360=90；但正确互补色是 (270+180)%360=90，没错——这里只是说明：别省略模运算，否则 JS 里传 450 进去，虽能渲染但逻辑已脱离预期） - 调试时看 computed style 显示的是归一化后的值（如你设
390，DevTools 显示30），容易误判原始逻辑是否跑偏 - 色相差值计算（如判断两个颜色是否相邻）若没先归一化，
350和10的差会算成340而不是更合理的20
真正关键的不是“超 360 能不能用”，而是所有涉及加减、比较、插值的逻辑，都得在 JS 或预处理器里主动归一化——浏览器只救 CSS 字符串解析那一瞬，救不了你的业务逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
