hsl()中不能直接嵌套calc()，必须用css变量预计算色相值；色相越界时浏览器行为不一致，应避免依赖自动归约；现代浏览器推荐用lch()实现安全动态偏移。
hsl() 里不能直接用 calc() 计算色相
写 hsl(calc(210 + 15), 70%, 60%) 会失效——浏览器直接丢弃整条颜色声明，回退到继承色或透明。CSS 规范禁止在 hsl() 函数参数中嵌套 calc()，哪怕只是加减一个数字。这不是兼容性问题，是语法级错误。
必须拆成独立变量再用 calc() 预算值
真正能跑通的路径只有一条：把色相抽成无单位数字变量，用 calc() 算出结果，再把这个结果当独立变量传给 hsl()：
-
--base-hue: 210;（不要带deg） --offset: 15;-
--shifted-hue: calc(var(--base-hue) + var(--offset));（结果仍是纯数字，不是375deg） - 最后用：
background-color: hsl(var(--shifted-hue), 70%, 60%);
注意：所有参与 calc() 的值必须同类型；--base-hue 是数字，--offset 也得是数字，不能是 15deg 或字符串。
色相越界（如 375）浏览器行为不统一
hsl(375, 70%, 60%) 在多数 Chrome/Firefox 中会被自动归约为 hsl(15, 70%, 60%)，但旧版 Safari（≤15.4）、某些 @keyframes 插值场景、或配合 color-mix() 时可能崩溃或截断。这不是“能用”，而是“碰巧没崩”。
- 别依赖自动归约，尤其做循环偏移（比如连续 hover +30°）
- CSS 没有
%运算符，无法写calc(var(--hue) % 360) - 真要安全绕圈，得用 JS 更新变量：
element.style.setProperty('--hue', ((current + 30) % 360).toString());
更稳的选择：改用 lch() 函数
如果项目支持现代浏览器（Chrome 111+、Safari 16.4+、Firefox 112+），lch() 是目前唯一原生支持动态色相偏移且自动模 360 的方案：
-
color: lch(60% 30 calc(220deg + 15deg));——calc()直接写在色相位置，超出 360° 自动绕回 - 不用拆变量、不用 JS、不担心越界，语义也更清晰
- 降级方案可并存：
color: hsl(220, 70%, 60%); color: lch(60% 30 calc(220deg + 15deg));
真正容易被忽略的点是：你以为色相偏移只是“换个颜色”，其实它牵扯到动画插值稳定性、深色模式下饱和度感知、以及 WCAG 对比度是否因明度意外变化而跌破阈值——这些都得靠 DevTools 实时测，不能只看代码跑没跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
