当为页面设置 linear-gradient 背景时，若未显式定义 HTML 或 body 的高度，浏览器可能仅按内容高度渲染背景，导致渐变被截断或呈现为水平色带；正确做法是确保根元素具备明确高度（如 html { height: 100% }），使渐变完整覆盖视口。
当为页面设置 `linear-gradient` 背景时，若未显式定义 html 或 body 的高度，浏览器可能仅按内容高度渲染背景，导致渐变被截断或呈现为水平色带；正确做法是确保根元素具备明确高度（如 `html { height: 100% }`），使渐变完整覆盖视口。
在实际开发中，使用 CSS 线性渐变（linear-gradient）作为页面背景是一种常见且美观的设计方式。但许多开发者会遇到一个典型问题：本应平滑过渡的渐变，却在页面上呈现出明显的水平“条纹”或“分段断裂”效果（如下图所示），尤其在深色多色渐变中尤为明显。
这个问题并非由渐变语法、颜色停靠点或浏览器兼容性引起，而根本原因在于：HTML 和 body 元素默认没有显式高度，导致 background 仅作用于内容所占的实际高度区域，而非整个视口。当页面内容较少（如仅有一个空 <main> 标签）时，body 高度可能远小于视口，渐变便被压缩、重复或截断，视觉上即表现为“断裂成行”。
✅ 正确解法是为 <html> 元素设置 height: 100%：
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%; /* 推荐同时设置，确保 body 至少撑满 html 高度 */
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：虽然能临时解决视口内显示问题，但一旦页面内容超出一屏（需滚动），100vh 会固定高度，导致底部内容区域无背景，渐变无法随滚动延续；
- ✅ html { height: 100% } + body { min-height: 100% } 是更健壮的组合——它让 body 基于 html 的 100% 高度基准伸缩，既保证初始满屏渲染，又支持内容增长后的自然延展；
- 若使用 CSS 重置（如 * { margin: 0; padding: 0; }），请确认未意外覆盖 html 或 body 的默认行为，仍需显式声明高度；
- 渐变本身无需添加 background-size: cover（该属性对 background 的 <gradient> 值无效），其天然铺满容器。
总结：CSS 渐变“断裂”本质是布局高度缺失所致，而非渐变缺陷。只需两行关键样式即可彻底修复——这是现代 CSS 响应式背景实践中的基础但易被忽视的重要细节。
