color-mix(in lch, ...) 是目前最稳的纯 css 解法，它绕开 linear-gradient() 的 srgb 插值缺陷，需同格式参数、显式中间点、拆分停靠点且间隔≤20%。
直接写 linear-gradient() 两端色，中间必然发灰——这不是你配色错了，是浏览器强制在 sRGB 空间做线性插值的物理结果。
为什么 color-mix(in lch, ...) 是目前最稳的纯 CSS 解法
它绕开了 linear-gradient() 的底层插值引擎，用静态混合代替运行时插值，且 Chrome 111+、Safari 16.4+ 已稳定支持。但必须满足三个硬条件：
-
color-mix()的两个参数必须同为lch()或同为oklch()格式，混用#ff0000或rgb()会静默失效 - 不能只写起点和终点；必须显式插入至少一个中间混合点，比如
color-mix(in lch, #ffcc00 70%, #0066cc 30%) - 整个渐变列表要拆开写：起点、中间点、终点都作为独立色标，不能赋值给 CSS 变量再引用
错误示例：linear-gradient(to right, #ffcc00, #0066cc) —— 全程走 sRGB，灰带必现。
正确写法：linear-gradient(to right, #ffcc00, color-mix(in lch, #ffcc00 70%, #0066cc 30%), color-mix(in lch, #ffcc00 30%, #0066cc 70%), #0066cc)
停靠点间隔 ≤20% 才能压住 banding
浏览器在两个停靠点之间仍用 sRGB 插值，跨度越大，中间越容易出灰阶。尤其蓝→黄、红→青这类色相翻转路径，视觉敏感区集中在 40%–60% 区间。
- 别依赖默认 0% / 100% 分布；手动写死位置，例如
rgb(0,0,255) 40%, rgb(255,255,0) 60% - 从 oklch 色值生成停靠点时，用 Björn’s OKLCH Picker 或
culori库采样，导出 RGB 值后拼成带百分比的渐变 - 移动端 iOS Safari 对浅色过渡（如
#fff9cc → #ffffff）也极敏感，哪怕无 alpha，也要加 1–2 个中间点
示例：linear-gradient(to right, rgb(230, 225, 220) 0%, rgb(210, 205, 215) 20%, rgb(180, 175, 205) 40%, rgb(130, 125, 190) 60%, rgb(80, 75, 160) 80%, rgb(40, 35, 110) 100%)
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
rgba() 渐变在 Safari 发灰，根源是 alpha 四通道独立插值
Safari 把 rgba(255,0,0,1) → rgba(255,0,0,0) 拆成 R/G/B/A 四条线各自线性变化，A 下降时 R/G/B 还没同步衰减，叠加在默认白色背景上就泛白灰。
- 最简解法：设死容器底色，
background-color: #fff，再单独用background-image写透明渐变 - 禁用
background简写——它会把lch()转成 RGB 缓存，失去意义；必须拆成background-color+background-image - 绝对不要混用
rgba()和lch()在同一渐变里，哪怕只有一个停靠点，整条链路都会退回到 sRGB
错误：linear-gradient(to right, rgba(255,0,0,1), lch(50% 90 120 / 0))
正确：background-color: #fff; background-image: linear-gradient(to right, lch(50% 90 120 / 1), lch(50% 90 120 / 0))
oklch() 和 in oklch() 在 linear-gradient 里根本不起作用
写了 linear-gradient(in oklch, oklch(30 0.4 270), oklch(90 0.4 100))？DevTools 里看到的 computed color 仍是 rgb()，说明浏览器直接忽略 in oklch 关键字，fallback 到 sRGB。这不是语法错，是规范不支持。
-
oklch()仅作为颜色输入语法，不改变插值逻辑；所有主流引擎（Chrome 124+、Firefox 125、Safari 17.5）均未实现该语义 - 真正有效的 OKLCH 方案只有两种：用
color-mix(in oklab, ...)（Chrome 112+/Safari 17.5+），或 JS/PostCSS 预生成停靠点 -
oklch()参数容错率极低：oklch(0.4 0.1 -0.05)✅，oklch(40% 10% -5%)❌（a/b 不接受百分比），oklch(0.4, 0.1, -0.05)❌（逗号分隔无效）
低色深屏幕（如多数笔记本 LCD）上的 banding 是硬件限制，不是代码问题——加噪点 SVG 或接受它，比硬啃插值更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
