CSS linear-gradient 出现断层本质是RGB颜色空间非感知均匀且受8bit位深限制；改用hsl()需控制亮度l线性变化、色相h与饱和度s微调，而非简单转换；生产中常结合加噪点、放大渐变背景等方案提升平滑度。
为什么 CSS 的 linear-gradient 用 RGB/HEX 会出断层
本质是颜色空间不均匀：RGB 是设备相关、非感知均匀的空间，相邻色值在人眼看来可能跳变很大，尤其在亮度或饱和度过渡区域（比如深蓝→浅蓝）。显示器位深限制（8bit/channel）叠加浏览器插值算法差异，会让 linear-gradient(#003366, #66ccff) 在低端屏或缩放后出现明显色带。
用 hsl() 替换颜色值就能解决吗
不能直接替换。HSL 本身也不完全感知均匀（尤其在高饱和度+低亮度区域），但关键在于——你要控制的是 h（色相）、s（饱和度）、l（亮度）三个维度的**渐进方式**，而不是把原有 RGB 值硬转成 HSL 后照搬。
实操建议：
- 优先让
l（亮度）线性变化，这是人眼最敏感的维度；h和s尽量小步微调，避免跨色环突变（比如hsl(240, 100%, 20%) → hsl(0, 100%, 80%)会经过紫色/红色中间段，产生意外色带） - 用开发者工具实时拖动 HSL 滑块观察过渡效果，比写死数值更可靠
- 示例对比：
/* 断层高发区 */
background: linear-gradient(to right, hsl(200, 80%, 30%), hsl(200, 80%, 70%));
/* 更平滑（只动 l，h/s 锁定） */
background: linear-gradient(to right, hsl(200, 70%, 30%), hsl(200, 70%, 70%));
真正有效的平滑技巧：加噪点 + 背景缩放
纯 CSS 渐变再优化也有物理极限。生产环境常用组合方案：
