chrome 112+ 是当前唯一稳定支持 linear-gradient(in lch, ...) 的浏览器，旧版 chrome、firefox 和 safari 会完全忽略该声明导致渐变失效；必须用 @supports 检测并提供 srgb 回退。
Chrome 112+ 才支持 in lch 和 in oklab 渐变色彩空间
直接写 linear-gradient(in lch, lch(50% 80 270), lch(50% 80 90)) 在旧版 Chrome、Firefox 或 Safari 里会整个渐变失效（回退为透明或 fallback 颜色），不是颜色不准，是根本没渲染。这不是语法写错，是浏览器根本不认识 in lch 这个关键字。
当前（2024 年中）唯一稳定支持的浏览器是 Chrome 112 及以上（含 Edge 112+），Firefox 仍处于 layout.css.color-mix.enabled 实验标志阶段，Safari 完全未实现。别在生产环境无条件启用。
- 用前先检测：
CSS.supports('background', 'linear-gradient(in lch, red, blue)') - 检测不通过时，必须提供
linear-gradient(red, blue)作为降级 -
@supports规则里才能安全嵌套in lch，单独写在普通样式块里会被忽略
color-mix() 和渐变的 in 关键字不是一回事
有人以为开了 color-mix(in lch, red, blue) 就等于渐变也自动走 LCH，其实完全无关。color-mix() 是单次混合函数，而渐变的 in lch 是指定整个插值路径的色彩空间——两者语法独立、解析逻辑分离。
更关键的是：即使浏览器支持 color-mix(in lch)，也不代表它支持 linear-gradient(in lch, ...)。目前只有 Chrome 112+ 同时实现了二者；Firefox 支持前者但不支持后者。
-
color-mix()可用于生成中间色变量，再手动拼成多段渐变（兼容方案） - 但无法替代
in lch渐变的平滑性——手动生成的色标仍是离散的 - 不要混淆
color-interpolation-space（SVG 属性，已废弃）和 CSS 渐变新语法
为什么 LCH 比 sRGB 插值过渡更自然？看一个真实偏移
sRGB 空间插值时，人眼感知的“亮度”和“饱和度”不是线性的。比如从 #ff0000（红）到 #0000ff（蓝），中间会经过一大段脏棕灰（sRGB 中点是 #800080，即紫，但视觉上发暗发浊）。LCH 把亮度（L）、色度（C）、色调（H）拆开，L 通道线性变化 ≈ 人眼明度感知线性，所以过渡更均匀。
实测：从 lch(60% 100 20)（亮橙）到 lch(60% 100 200)（青），L 和 C 固定，只动 H，出来的中间色干净、不发灰；而同样起止点的 sRGB 渐变，中间会明显变暗、褪色。
- LCH 的 H 是圆周角，
20deg → 200deg走短弧还是长弧？浏览器按最短路径算（即 180°），不用手动归一化 - Oklab 更进一步优化了色差一致性，但当前仅 Chrome 实现，且对多数 UI 场景提升不如 LCH 明显
- 别用 LCH 值硬编码——先用工具（如 Color Picker by Bottosson）转出对应 sRGB fallback
实际写法：降级必须显式写出，不能靠 cascade 自动 fallback
CSS 不会“智能降级”in lch 渐变为 sRGB 版本。如果只写一句 background: linear-gradient(in lch, ...)，不支持的浏览器会直接丢弃整条声明，回到上层继承色或 transparent。
正确姿势是双声明叠加，靠层叠优先级覆盖：
button {
background: linear-gradient(red, blue); /* fallback */
background: linear-gradient(in lch, lch(50% 80 270), lch(50% 80 90));
}
注意第二行必须严格写在第一行之后，且不能加 !important —— 否则 fallback 会被锁死。
- 别把两个渐变写进同一个
background值里（如逗号分隔），那会变成多背景，不是降级 - PostCSS 插件（如
postcss-color-mix）目前不处理in lch渐变，无法自动补 fallback - 构建时无法静态替换——因为 LCH 值和 sRGB 值没有解析时可逆映射，必须设计阶段就配好对
LCH 插值真正起效的前提，是整个链路都支持：开发者得手选起点终点、工具得能预览中间帧、CI 得跑新版 Chrome 测试渲染、用户浏览器得真装了 112+。漏掉任何一环，看到的都不是你调的那个“更顺滑”的渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
