linear-gradient(in oklch, ...) 在所有浏览器中均无效，因CSS规范强制渐变在sRGB空间插值，in oklch等语法未被标准支持；color-mix(in oklch, ...) 是当前唯一可行的纯CSS替代方案，但仅支持单点混合且Firefox尚未实现。
linear-gradient(in oklch, ...) 在所有浏览器中都无效——这不是语法写错，是规范根本不支持。
Chrome 112+、Safari 17.5+、Firefox 120+ 均静默忽略该写法，整条声明被丢弃，背景可能变透明或回退到上一条规则，且不报错、不警告。
linear-gradient() 中 in oklch 为什么直接解析失败
- CSS 渐变规范强制所有
linear-gradient()、radial-gradient()在srgb空间插值，in oklch、in lch、in oklab均未纳入标准 - 写成
linear-gradient(to right, in oklch, oklch(0.5 0.2 240), oklch(0.8 0.2 240))会被解析器当作非法语法跳过 - 即使起止色全用
oklch()，浏览器仍会先转成 sRGB 再线性混合，中间必然出现灰带、亮度塌陷或色相断层
color-mix(in oklch, ...) 是当前唯一可行的纯 CSS 替代方案
- 它绕过渐变引擎，在声明时静态计算混合色，真正走 OKLCH 插值路径
- 必须满足两个硬条件：
- 两端颜色都为
oklch()格式（不能混用#rrggbb、hsl()或white） - 权重需显式写出，如
oklch(0.4 0.25 240) 70%, oklch(0.8 0.25 240) 30%
- 两端颜色都为
- 浏览器支持现状：
- Chrome 112+ ✅
- Safari 17.5+ ✅（刚起步，部分边缘 case 不稳定）
- Firefox ❌（尚未实现）
- 它只能产出单点色，无法生成连续渐变；若需多阶过渡，得手动写多个
color-mix()或借助 PostCSS 插件（如@csstools/postcss-color-mix）
兼容旧环境时，用停靠点 + 噪点控制视觉灰带
当 color-mix() 不可用，或需覆盖 Safari 17.4 及更早版本时，必须手动干预插值路径：
- 避免直写两端：
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%)
- 色相差 >180° 时必须手动拆段：
oklch(0.7 0.25 350) → oklch(0.7 0.25 0) → oklch(0.7 0.25 10)
- 叠加低透明度噪点防带状：用 data URL 加一层
background-image: linear-gradient(), url("data:image/svg+xml,%3Csvg...")，透明度设为 0.02 左右
OKLCH 的价值不在“写上去就生效”，而在于你能精确控制 L/C/H 的变化节奏；但它的失效方式很安静——错一个单位、漏一个百分号、混一次色彩格式，效果就彻底消失，且浏览器连 warning 都不给。
立即学习“前端免费学习笔记（深入）”；
