hsl(none none none)不是合法语法，浏览器会直接忽略整条声明，导致颜色过渡失效；hsl()三参数必须为有效数值且s/l带%，h推荐带deg单位，否则无法插值计算中间帧。
hsl(none none none) 不是合法语法，浏览器会直接忽略整条声明，根本不会触发任何颜色过渡。
为什么 hsl(none none none) 会导致 transition 失效
CSS 的 hsl() 函数要求三个参数都必须是有效值：H（色相）为数字（推荐带 deg 单位），S（饱和度）和 L（明度）必须是带 % 的百分比。写成 none 属于语法错误，等价于声明无效 —— 浏览器会退回到继承色、初始值或透明，具体表现取决于上下文，但绝不会插值。
- Chrome / Firefox 遇到
hsl(none, none, none)会静默丢弃该声明，background-color可能回退为transparent或父级color - Safari 更严格，可能连带整个样式块失效
- 即使起始/结束状态之一是非法
hsl()，transition 就会中断：浏览器无法计算中间帧
真正能平滑过渡的 hsl() 写法长什么样
合法且可插值的 hsl() 必须满足三要素：数值有效、单位明确、S/L 带 %，H 推荐带 deg。
- ✅ 正确示例：
hsl(210deg, 70%, 60%)、hsl(0deg, 100%, 50%)、hsl(360deg, 100%, 50%) - ❌ 错误写法：
hsl(210, 70, 60)（缺单位）、hsl(210deg, 70%, 60)（L 缺 %）、hsl(210deg, 100, 50%)（S 缺 %） - ⚠️ 边界注意：从
hsl(355deg, ...)→hsl(5deg, ...)是安全的，浏览器自动走 +10° 最短路径；但写成hsl(355, ...)→hsl(5, ...)（无单位）在旧 Safari 中可能退成透明
想用变量控制过渡？必须配 @property
仅靠 --hue: 210 然后 hsl(var(--hue), 70%, 60%) 不会触发颜色过渡 —— CSS 变量本身不可动画。必须显式注册类型：
@property --hue {
syntax: "<number>";
inherits: false;
initial-value: 210;
}</number>
- 注册后才能写
transition: --hue 0.4s linear -
calc()不能嵌套在hsl()里，例如hsl(calc(var(--hue) + 30), 70%, 60%)无效 - 若只改
H，务必固定S和L，否则饱和度或明度抖动会破坏“纯色流动”感
最容易被忽略的是：哪怕所有语法都对，只要 S 或 <code>L / <code>> 85%，人眼就几乎看不出色相变化 —— 动画会退化成明暗闪烁，不是彩虹流动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
