linear-gradient 中无法直接用 oklab 插值，必须配合 color-interpolation-method: oklab 属性且色标全用 oklab() 或 oklch() 格式，否则仍走 srgb；chrome 117+/firefox 119+/safari 17.4+ 支持，旧版回退，需 @supports 兜底。
linear-gradient 中怎么用 oklab 插值
默认情况下，linear-gradient 使用 sRGB 色彩空间做颜色插值，过渡容易发灰、偏暗，尤其在蓝→紫、黄→绿这类跨度大的色标之间。要启用更平滑、更符合人眼感知的插值，必须显式指定 color-interpolation-method 为 oklab ——但注意：它不是加在 gradient 函数里，而是作为独立 CSS 属性设置在元素上。
- 仅支持现代浏览器（Chrome 117+、Firefox 119+、Safari 17.4+），旧版会忽略该声明，回退到 sRGB
- 必须配合使用
oklab()或oklch()颜色值，否则即使设了color-interpolation-method: oklab，浏览器仍按 sRGB 解析十六进制或rgb()色值 - 该属性只影响当前元素的渐变渲染，不影响子元素或伪元素，需单独设置
示例：
.gradient-box {
background: linear-gradient(90deg, oklab(0.5 0.2 0.3) 0%, oklab(0.8 0.1 0.7) 100%);
color-interpolation-method: oklab;
}
为什么不能直接写在 gradient 函数参数里
因为 linear-gradient()、radial-gradient() 等函数本身不接收插值方法参数。CSS 规范把插值逻辑和颜色定义做了分离：颜色值决定“起点和终点是什么”，而 color-interpolation-method 决定“中间怎么算”。这和 SVG 的 color-interpolation 属性设计一致，但 CSS 版本目前只作用于渐变（不用于普通 color 或 border-color）。
- 写成
linear-gradient(oklab, 90deg, ...)是无效语法，浏览器报错或静默忽略 -
color-interpolation-method不接受函数调用，只接受字面量值：srgb、oklab、lch等，不能带括号或引号 - 它和
background-blend-mode类似，是独立于 background-image 的绘制层控制属性
常见错误：渐变没变“顺”，还是发灰
即使写了 color-interpolation-method: oklab，也可能看不到效果，原因通常是：
- 色标用了
#ff6b6b或rgb(255 107 107)这类非 oklab 颜色值 —— 浏览器先转成 sRGB 再插值，oklab设置形同虚设 - 忘了给元素设明确尺寸（如
width/height或min-height），导致渐变区域为 0，根本不可见 - 父容器有
overflow: hidden且子元素未触发 BFC，渐变被裁剪，误以为没生效 - DevTools 里检查 computed 样式时，
color-interpolation-method显示为unset，说明浏览器不支持或被更高优先级规则覆盖
兼容性兜底与调试建议
生产环境不能只依赖 oklab 插值。稳妥做法是双写渐变，并用 @supports 隔离：
.btn {
background: linear-gradient(90deg, #4cc9f0, #4361ee);
}
@supports (color-interpolation-method: oklab) {
.btn {
background: linear-gradient(90deg, oklab(0.65 0.15 0.2) 0%, oklab(0.55 0.2 0.6) 100%);
color-interpolation-method: oklab;
}
}
调试时，打开浏览器 DevTools → Styles 面板，确认两点：一是 color-interpolation-method 是否显示为 oklab（而非 initial 或空），二是 computed 的 background-image 是否解析出 oklab 颜色值。如果任一环节没对上，就说明链路断在了颜色定义或属性支持上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
