linear-gradient(in oklch, ...) 在所有浏览器中均无效，规范不支持；OKLCH彩虹渐变需用color-mix(in oklch, ...)手动打点或三段停靠点+色相拆分防断层。
直接说结论：linear-gradient(in oklch, ...) 在所有浏览器中都无效，写了就静默丢弃——这不是兼容性问题，是规范根本不支持。所谓“OKLCH彩虹渐变”，必须绕过渐变引擎，用 color-mix() 手动打点，或用三段停靠点+色相拆分控制插值路径。
为什么linear-gradient(oklch(0.7 0.25 0), oklch(0.7 0.25 360))会出灰紫脏带
浏览器强制在 sRGB 空间插值，哪怕起止色都写对 oklch()，也会先把它们转成 RGB 再线性混合。色相从 350° → 10° 这类跨 0° 的跳跃，会被当成长弧（350→360→0→10），中间经过 H=0° 附近低彩度区域，视觉上就是一道发灰、泛紫的断层。
- 实测现象：本该鲜艳的红→橙→黄过渡，中间突然出现一截暗沉的紫灰带
- 根本原因：CSS 渐变规范未定义色相短弧优化，
oklch()仅作颜色输入，不参与插值计算 - 哪怕写成
linear-gradient(to right, in oklch, ...)或linear-gradient(in oklch, ...)，Chrome 112+、Safari 17.5+、Firefox 120+ 全部静默忽略整条声明
用color-mix(in oklch, ...)生成真 OKLCH 中间色
color-mix() 是当前唯一能在纯 CSS 中启用 OKLCH 插值的函数，它在声明阶段静态计算，不依赖运行时渐变引擎。
- 必须两端同为
oklch()格式：color-mix(in oklch, oklch(0.7 0.25 0) 80%, oklch(0.7 0.25 60) 20%)✅ - 混用即失效：
color-mix(in oklch, #ef4444 80%, oklch(0.7 0.25 60) 20%)→ 无输出 ❌ - 只产出单点色，5 阶彩虹需手动写 4 次：
color-mix(... 0%–25%)、color-mix(... 25%–50%)等 - 浏览器支持：Chrome 112+ 可用；Safari 17.5+ 刚起步，部分混合结果偏淡；Firefox 尚未实现
退而求其次：三段停靠点 + 色相拆分防断层
当 color-mix() 不可用，或需覆盖 Safari 16.x、旧安卓 WebView 时，最可靠的做法是压缩插值跨度，并手动切开 >180° 的色相差。
- 避免直写两段：
linear-gradient(to right, oklch(0.7 0.25 0), oklch(0.7 0.25 360))→ 必然出灰 - 改用三段停靠点：
linear-gradient(to right, oklch(0.7 0.25 0) 0%, oklch(0.7 0.24 180) 50%, oklch(0.7 0.25 360) 100%)，中间色 H 选感知中位而非数值中位 - 跨 0° 必须拆段：
oklch(0.7 0.25 350) → oklch(0.7 0.25 0) → oklch(0.7 0.25 10)，不能省略中间节点 - 叠加 SVG 噪点防带状：
background-image: linear-gradient(...), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg")，透明度设为0.02
oklch() 参数单位错一个，整条就静默失效
这是最容易被忽略的细节：浏览器不会报错，也不会 fallback，而是直接跳过整行 CSS。UI 可能回退到前一条颜色，也可能变透明——你却在 DevTools 的 computed 样式里只看到降级后的 #rrggbb，完全看不到真实行为。
- L 必须带
%：oklch(70% 0.25 0)✅，oklch(0.7 0.25 0)⚠️（仅新浏览器支持，且 H 小数位 >1 可能解析失败） - C 必须是无单位小数：
oklch(70% 0.25 0)✅，oklch(70% 25% 0)❌ - H 后不加
deg：oklch(70% 0.25 0)✅，oklch(70% 0.25 0deg)❌（Safari 16.x 和部分 WebView 解析失败） - alpha 必须用
/分隔：oklch(70% 0.25 0 / 0.8)✅，oklch(70% 0.25 0, 0.8)❌
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
