css 线性渐变在页面中显示为不连续的水平色带，根本原因是 body 未占据视口全高，导致渐变被“截断”并重复平铺；只需确保 html 元素高度为 100%，即可让渐变完整渲染。
css 线性渐变在页面中显示为不连续的水平色带，根本原因是 body 未占据视口全高，导致渐变被“截断”并重复平铺；只需确保 html 元素高度为 100%，即可让渐变完整渲染。
当为 <body> 设置 linear-gradient 作为背景时，若页面内容高度不足或容器未明确撑开，浏览器会将 body 视为“仅包裹内容”的非伸展元素。此时，background 默认以 background-repeat: repeat（尽管渐变本身不可重复）的方式在 body 的计算高度内渲染——而该高度往往远小于视口，导致渐变被压缩、采样失真，视觉上呈现为生硬的水平分段或色带（banding），尤其在深色过渡区域尤为明显。
根本解法：确保根容器具备明确的高度上下文
html {
height: 100%;
}
body {
margin: 0;
min-height: 100vh; /* 推荐：保证至少占满视口 */
background: linear-gradient(
135deg,
rgba(45, 20, 44, 1) 0%,
rgba(81, 10, 50, 1) 25%,
rgba(128, 19, 54, 1) 50%,
rgba(199, 44, 65, 1) 75%,
rgba(238, 69, 64, 1) 100%
);
}✅ 关键说明：
- html { height: 100%; } 是必要前提——它使 <html> 元素继承视口高度，为 <body> 提供百分比高度的计算基准；
- body { min-height: 100vh; } 比单纯 height: 100% 更健壮：既确保初始满屏渲染，又能在内容超出视口时自然扩展，避免滚动时底部留白或渐变截断；
- 移除过时的 -moz- / -webkit- 前缀（现代浏览器已原生支持 linear-gradient），精简代码并提升可维护性；
- 保留 filter（IE 兼容）仅当项目仍需支持 IE10/11；否则建议移除。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 避免仅设置 body { height: 100vh; } —— 当页面内容高度超过视口时，会导致底部内容被裁切，且滚动后渐变无法延续；
- ❌ 不要依赖 * { height: 100%; } 全局重置，这会破坏弹性布局行为，引发不可预知的副作用；
- ✅ 若使用 CSS 自定义属性或 JS 动态控制渐变，建议将渐变定义在 :root 或 body 上，并通过 min-height: 100vh 保障渲染完整性。
总结：渐变断层不是 CSS 渐变本身的缺陷，而是文档流高度塌陷导致的渲染上下文缺失。通过 html { height: 100%; } + body { min-height: 100vh; } 组合，即可一劳永逸地解决该问题，同时保持响应式与可扩展性。
