chrome 渐变断层主因是8bit色深下rgb线性插值导致人眼可辨阶跃，需同时确保渲染空间完整（html{height:100%};body{margin:0;min-height:100vh}）与优化插值控制（如lch中间色、color-mix、svg噪点叠加）。
Chrome 中 CSS 渐变出现断层，不是渲染 bug，而是默认在 8bit 色深下对 RGB 线性插值时，人眼恰好能分辨出离散阶跃——尤其在暗→亮、红→蓝这类大跨度过渡中。只调颜色或只加 background-size 都压不住，得从渲染上下文 + 插值控制双路下手。
为什么 Chrome 里渐变看着有硬边条纹？
常见错误现象：body { background: linear-gradient(to bottom, #1a1a2e, #ffffff); } 在 Chrome DevTools 里检查发现 body 高度只有几十像素，渐变被压缩成窄带后重复平铺，视觉上就是几道水平色带。
- 根本原因是
html没设高度，body的百分比高度无基准，min-height: 100vh单独用也不够——滚动时内容超长，底部渐变会突然截断 - Chrome 默认启用
color-gamut: wide，若你用 sRGB 色值但浏览器按 Display P3 解析，插值路径会偏移，加剧断层 - 即使写了
oklch()，只要 H 差超过 180°（比如oklch(0.4 0.2 10)→oklch(0.4 0.2 350)），Chrome 仍 fallback 到 sRGB 插值，中间自动走长弧，产生灰紫带
必须写的两行 CSS：确保渲染空间完整
不写这两句，后面所有颜色优化都白搭。它们解决的是“渐变有没有足够空间画出来”的问题，不是“颜色过渡顺不顺”。
-
html { height: 100%; }—— 给body提供百分比高度的计算依据 -
body { margin: 0; min-height: 100vh; background: linear-gradient(...); }——min-height保证初始满屏，又允许内容撑开；margin: 0防止默认外边距干扰高度计算 - 别用
background: url(...) linear-gradient(...)这种简写，它会把background-repeat强制设为no-repeat，而单独声明background-image默认是repeat，容易误触发平铺
怎么加中间色才真有效？
不是越多越好，关键看位置是否落在人眼敏感区的缓冲带上。Chrome 插值算法对明度变化最敏感，L 值突变更容易出带。
- 暗→亮过渡：优先补 L 值中段色，比如
hsl(210, 60%, 20%)→hsl(210, 60%, 50%)→hsl(210, 60%, 80%)，而不是等分 HEX - 冷→暖跳变：避免
hsl(240, 80%, 50%)直接到hsl(0, 80%, 50%)，中间加hsl(300, 80%, 50%)（品红）作缓冲 - Chrome 对
color-mix(in lch, ...)支持稳定（Chrome 111+），可预生成中间色：比如color-mix(in lch, #1a1a2e 75%, #ffffff 25%)得到 25% 位置色，再拼进linear-gradient()
最后一步：叠加噪点干扰视觉感知
纯 CSS 渐变再密也有物理极限。Chrome 下最轻量有效的干扰手段，是叠一层透明度极低的 SVG 噪点纹理。
- 用 base64 内联 4×4 像素随机点：
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0z' fill='%23000' opacity='.02'/%3E%3C/svg%3E"); - 必须配
background-repeat: no-repeat和background-size: cover，否则噪点自身重复会加重条纹感 - 透明度控制在
0.01–0.03，过高会模糊整体观感，过低无效；iOS Safari 下建议叠在::before伪元素里，避免触发重绘抖动
真正容易被忽略的点：Chrome 开发者工具里的「Rendering」面板有个「Emulate color vision deficiency」选项，打开后如果色带更明显，大概率是你屏幕校准偏差或环境光干扰，不是代码问题。先关掉 HDR、自动亮度这些系统级色彩管理，再调 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
