css渐变断层根本原因是8bit色深下rgb线性插值与人眼感知不匹配，须双管齐下：先用html{height:100%}+body{min-height:100vh}确保渲染空间完整，再通过显式停靠点、oklch色值或dithering优化颜色过渡。
为什么body上设linear-gradient会出水平条纹？
根本原因是 body 没有足够高度，导致渐变被压缩后重复平铺。浏览器把一段几像素高的渐变当“小图”反复复制，视觉上就是红蓝交替的硬边条纹。
-
html默认无高度，body又依赖它计算百分比，所以height: 100%在body上无效 - 只写
min-height: 100vh在body上看似够用，但滚动时若内容超长，底部渐变可能突然截断或留白 - 用
background-image单独声明渐变，会继承默认background-repeat: repeat，而background简写自动设为no-repeat
✅ 正确组合：
html { height: 100%; }
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #4a3a5a, #8a5a7a, #e67e7e);
}
怎么加中间色才真正缓解断层？
不是越多越好，关键在“位置”和“感知连续性”。浏览器默认只在 0% 和 100% 采样，中间全靠线性插值——如果起止色明度差大（如 #000 → #fff），或色相跨半圈（如红→蓝），RGB 插值必然经过人眼最敏感的灰紫/灰绿区。
- 暗→亮过渡：优先补亮度中位色，比如
hsl(210, 60%, 20%)→hsl(210, 60%, 50%)→hsl(210, 60%, 80%)，而不是简单等分 HEX - 冷→暖跳变：避免
hsl(240, ...)直接到hsl(0, ...)，中间加hsl(300, ...)（品红）作缓冲 - 别信自动工具生成的中间色——把
#ff0000和#0000ff丢进转换器，常偏紫过重；手动拖 HSL 滑块实时看过渡更可靠
示例（修复红→蓝）：
background: linear-gradient(to right, #ff0000, #cc3366, #6666cc, #0000ff);
为什么改用 OKLCH 或 HSL 还是断层？
OKLCH 和 HSL 是更接近人眼感知的色彩空间，但浏览器底层插值仍常 fallback 到 sRGB——尤其当两个色值的 H 差超过 180°，或未显式约束 L 和 C 变化幅度时，断层照旧。
-
oklch(0.2 0.1 240)→oklch(0.9 0.3 245)看似合理，但 L 跨幅 0.7，远超人眼舒适阈值（建议 ≤ 0.3） - 写了
hsl(0, 100%, 50%)→hsl(240, 100%, 50%)，但没控制中间停靠点，浏览器仍均分插值，色相跳跃仍在 - OKLCH 渐变必须配合显式停靠点：
oklch(0.4 0.2 240) 0%, oklch(0.6 0.22 245) 50%, oklch(0.75 0.25 250) 100%
⚠️ 注意：纯 CSS 无法强制浏览器全程在 OKLCH 空间插值，color-mix(in oklch, ...) 才是目前最可控的中间色生成方式。
叠加噪点（dithering）为什么有效？
这是物理级干扰——用极低透明度（opacity: 0.02）的随机像素纹理覆盖渐变，打破人眼对规律色阶的识别能力。不是“修图”，是“骗眼”，Apple、Figma 等设计系统都在用。
- 不用外链图片，用内联 SVG 噪点：
background-image: url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E"), linear-gradient(...); - 噪点图透明度必须足够低（0.01–0.03），否则会脏；也不能太稀疏，否则干扰不足
- 对移动端 iOS Safari 特别有效——它 GPU 渲染路径对纯渐变更“诚实”，条纹更明显
实操片段：
body {
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' fill-opacity='0.02'/%3E%3C/svg%3E"),
linear-gradient(135deg, #1a1a2e, #4a3a5a, #8a5a7a, #e67e7e);
}
真正容易被忽略的是：断层从来不是单一因素导致的。你可能调好了高度、加了三段中间色、还用了 OKLCH，但忘了禁用 background-repeat，或者在调试时开了深色模式让对比更刺眼——最终效果还是带状。每一步都要验证，而不是只改一处就以为解决了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
