hsl()色相参数本质是角度，支持任意数值并自动模360运算；calc()中色相运算须为纯数字，不可带单位；动画需跨整圈（如0→720）或配合@property声明才能平滑过渡。
hsl() 的色相参数本质是角度，不是整数范围限制
浏览器把 hsl() 第一个参数当作色轮上的旋转角度，0° 和 360° 指向同一个方向（红），720° 就是绕两圈回到红，-90° 是从红逆时针转 90° 到青蓝。它不校验“是否在 0–360 内”，只做模运算后取余定位。所以 hsl(390, 100%, 50%) 等价于 hsl(30, 100%, 50%)，hsl(-60, 100%, 50%) 等价于 hsl(300, 100%, 50%)。
calc() 里加减色相必须不带单位，否则会失败
写 calc(var(--hue) + 30) 没问题，但写成 calc(var(--hue) + 30deg) 或 calc(var(--hue) + 30°) 会直接让整个 hsl() 声明无效——浏览器报 NaN 或回退为透明/黑色。因为 CSS 的 calc() 对数字类型严格，--hue 必须声明为纯数字（如 --hue: 240），不能带任何单位。
- 正确：
--hue: 240;→hsl(calc(var(--hue) + 30), 80%, 60%) - 错误：
--hue: 240deg;→calc(var(--hue) + 30)解析失败 - 错误：
hsl(calc(var(--hue) + 30deg), ...)——calc()不接受混合单位
动画中写 0→360 会卡住，得写 0→720 才丝滑
如果你在 @keyframes 里写 0% { --hue: 0 } 100% { --hue: 360 }，浏览器看到起止值语义相同（都是红），可能跳过插值或闪一下。真正生效的写法是跨整圈：从 0 到 720，或 -180 到 180，确保插值路径连续。再配合 @property 声明变量可动画：
@property --hue {
syntax: '<number>';
inherits: false;
initial-value: 0;
}</number>
否则变量本身不可被 animation 驱动，transition 也无效。
别依赖自动取模做设计逻辑
虽然 hsl(390, ...) 能显示，但部分旧版 Safari、CSS 预处理器（如早期 Sass）、或某些构建工具（如 PostCSS 插件）并不严格实现取模逻辑，可能报错或静默失败。生产环境建议：
- 手动控制色相值在 0–360 内（尤其用于语义化命名时，如
--hue-warning: 45） - 用
calc()做偏移时，加个mod逻辑不现实，不如靠设计规范约束步进（如固定 +30、+60） - 真要循环动画，优先走
filter: hue-rotate()，它原生支持 0→360 连续过渡，且作用于整个渲染层
色相能超 360 是语法宽容性，不是设计接口——把它当备用通道，别当主力逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
