断层是浏览器在8bit色深下对长跨度颜色线性插值时人眼可辨的离散色阶，根本解法是加中间色或dithering噪点；因默认仅在0%和100%采样，无缓冲，明度差大或色相跨半圈时rgb插值易经人眼敏感区，形成硬分界。
断层不是写错了，是浏览器在 8bit 色深下对长跨度颜色做线性插值时，人眼能分辨出离散色阶——加中间色或加噪点（dithering）是最直接、兼容性最好的解法。
为什么只写两个颜色就容易断层
浏览器默认在 0% 和 100% 位置采样插值，中间无缓冲。尤其当起止色明度差大（如 #1a1a2e → #ffffff）、或色相跨半圈（如红→蓝）时，RGB 插值会经过人眼敏感的灰紫/灰绿过渡带，视觉上就是几条硬分界线。
- 这不是 bug，是渲染精度物理限制：多数显示器每通道仅 8bit，最多 256 级亮度
- Chrome/Firefox 用软件插值稍柔和；Safari 在 GPU 渲染路径下对双色渐变更“诚实”，断层更明显
- 移动端 iOS Safari 尤其敏感，哪怕
#f5f5f5→#ffffff这种浅灰过渡都可能出带
手动插入 2–3 个中间色最稳妥
把长跳变拆成短跳变，让每段插值都在人眼不易察觉的范围内。重点不是“多”，而是“准”——中间色要落在起止色的感知中间区，而非简单等分 HSL 数值。
- 暗→亮过渡：优先补亮度中位色，例如
hsl(210, 60%, 20%)→hsl(210, 60%, 50%)→hsl(210, 60%, 80%) - 冷→暖过渡：避免直接
hsl(240, ...)→hsl(0, ...)，中间加hsl(300, ...)（品红）缓冲 - 别依赖自动转换工具：把
#ff0000和#0000ff直接丢进 HEX→HSL 转换器生成的中间色，常偏紫过重；手动调 HSL 滑块观察实时过渡更可靠 - 示例（修复红→蓝断层）：
background: linear-gradient(to right, #ff0000, #cc3366, #6666cc, #0000ff);
用噪点（dithering）物理干扰色带感知
纯 CSS 渐变再优化也有极限。叠加一层极低透明度的随机像素纹理，能打破规律色阶，欺骗人眼——这是专业设计系统（如 Apple Human Interface Guidelines）推荐的实战方案。
- 用 base64 内联 1×1 噪点图最轻量：
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="); - 透明度控制在
0.01–0.03，过高会模糊整体观感，过低无效 - 必须配合
background-repeat: no-repeat和background-size: cover，否则噪点自身重复反而加重条纹 - Safari 下效果最显著，但所有浏览器都适用；iOS 上建议叠在伪元素里，避免触发 repaint 问题
Safari 断层要额外绕过渲染限制
它对直接写在元素上的 linear-gradient 有特殊裁剪逻辑，GPU 渲染精度会降级。不改颜色也能缓解，关键是换承载方式。
- 禁用原生背景写法，改用伪元素：
::before或::after承载渐变 - 伪元素必须设
content: ""、position: absolute、inset: 0（比top:0;left:0;width:100%;height:100%更稳） - 加
transform: translateZ(0)强制提升为合成层，iOS 必加，否则伪元素仍走低精度路径 - 主元素只留
position: relative和透明背景，别塞其他 background 属性
真正难的不是选哪个技巧，而是判断断层来源：是颜色跨度太大？容器高度太小导致平铺？还是 Safari 特定渲染路径？先开 devtools 检查 computed styles 里的 background-repeat 和实际容器尺寸，再动手改渐变本身——很多“断层”其实是 min-height 没设够，背景被反复平铺出来的假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
