linear-gradient 默认不平滑是因为在非感知均匀的 rgb 空间插值，且受 8bit 位深限制易产生色带；可用 color-mix(in oklch, ...) 手动混合、三段式 oklch 停靠点控制或噪点+放大背景兜底。
为什么 linear-gradient 默认插值不平滑
根本原因是浏览器对 linear-gradient() 的颜色插值默认在 RGB 空间进行，而 RGB 不是感知均匀空间——人眼觉得“等距”的亮度或饱和度变化，在 RGB 数值上可能跳跃很大。再加上 8bit/channel 的位深限制，深蓝→浅蓝这类过渡极易出现肉眼可见的色带（banding），尤其在 Retina 屏缩放或低刷新率设备上更明显。
用 color-mix(in oklch, ...) 手动插值中间色
这是目前唯一能在纯 CSS 中启用 OKLCH 感知均匀空间混合的方式，但要注意它不是“让渐变引擎改用 OKLCH”，而是绕过渐变、静态算出单点色值：
- 两端颜色必须都是
oklch()格式，混用#rrggbb或hsl()会让整条color-mix()失效 - 只能产出一个固定混合色，比如
color-mix(in oklch, oklch(0.4 0.25 240) 70%, oklch(0.8 0.25 240) 30%)→ 得到一个确定的 OKLCH 值 - 若需多阶平滑过渡，得手动写多个停靠点，或借助 PostCSS 插件如
@csstools/postcss-color-mix自动生成 - 支持仅限 Chrome 112+、Safari 17.5+；Firefox 当前（2026年10月）仍未实现
用三段式停靠点控制 OKLCH 渐变路径
当 color-mix() 不可用，或你需要真正连续的渐变背景时，最实际的做法是手动干预插值路径本身：
- 避免直接写
linear-gradient(to right, oklch(0.3 0.25 240), oklch(0.7 0.25 240))—— 浏览器仍会在内部做线性数值插值，中间会塌陷成灰带 - 改用三个停靠点：
linear-gradient(to right, oklch(0.3 0.25 240) 0%, oklch(0.5 0.24 242) 48%, oklch(0.7 0.25 240) 100%)，其中中间色不是数值中位，而是按视觉中位微调的 OKLCH 值 - 色相跨 180° 时必须拆段：从
oklch(0.7 0.25 350)到oklch(0.7 0.25 10)，要写成oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10) - 所有停靠点的
L（明度）和C（色度）尽量保持缓变，避免突兀拐点
兜底方案：噪点 + 放大渐变背景
OKLCH 和 color-mix() 都不可用时，别硬扛，用成熟经验压色带：
- 叠加一层极低透明度的
repeating-linear-gradient噪点纹理（如background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px)） - 把渐变背景尺寸放大（
background-size: 400% 400%），再用background-position控制起始偏移，拉伸插值步长 - 这两招组合使用，在 IE11 到 Chrome 100+ 全系有效，且无 JS 依赖
OKLCH 插值不是“开了就平滑”，它把责任从浏览器移交给了你：你得自己选中间点、拆色环、控色度。真正难的从来不是语法，而是判断哪一段该缓、哪一段该拆、哪一点该微调——这些没法靠工具自动补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
