当为body设置线性渐变背景时，若页面内容高度不足视口，浏览器可能仅对body的“收缩高度”区域渲染渐变，导致视觉上断裂成水平色带；根本原因是html根元素未占据完整文档高度，致使body无法撑满 viewport。
当为body设置线性渐变背景时，若页面内容高度不足视口，浏览器可能仅对body的“收缩高度”区域渲染渐变，导致视觉上断裂成水平色带；根本原因是html根元素未占据完整文档高度，致使body无法撑满 viewport。
在CSS中，<body>元素默认是块级、非绝对定位元素，其高度由内部内容决定（即“包裹内容”行为）。即使你为body设置了background: linear-gradient(...), 若整个文档高度（包括<html>）未明确设为100%，浏览器会将body的高度计算为内容实际高度（例如只有几行导航时可能仅高60px），此时渐变仅在该狭窄区域内重复或截断渲染——这就是你看到的“水平条纹”或“分段色带”的真实原因。
✅ 正确解法：确保 <html> 元素高度占满视口，从而让 <body> 能继承并扩展至全屏：
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%; /* 推荐使用 min-height，兼顾长页面滚动 */
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%
);
}⚠️ 注意事项：
- ❌ 避免仅设置 body { height: 100vh }：在内容超出一屏时，底部渐变会被截断，且滚动后新区域无背景（因height: 100vh是固定值，不随内容扩展）；
- ✅ 推荐组合：html { height: 100% } + body { min-height: 100% } —— 既保证初始全屏渐变，又支持长页面自然延展；
- ? 移除过时前缀（如 -moz-linear-gradient）：现代浏览器已原生支持 linear-gradient()，保留仅增加冗余代码；
- ? 验证技巧：在开发者工具中检查 html 和 body 的实际渲染高度（Elements → Computed），确认二者均为 100% 或 100vh。
总结：渐变“断裂”不是CSS语法问题，而是文档流高度塌陷所致。修复核心在于建立正确的高度继承链：html → body → 渐变背景。添加 html { height: 100% } 是最小必要改动，稳定、兼容、零副作用。
立即学习“前端免费学习笔记（深入）”；
