当为页面设置线性渐变背景时，若未显式定义HTML根元素高度，浏览器可能因渲染高度不足导致渐变被截断或呈现为水平色带（条纹），正确做法是为html元素设置height: 100%，确保渐变背景拥有足够绘制空间。
当为页面设置线性渐变背景时，若未显式定义html根元素高度，浏览器可能因渲染高度不足导致渐变被截断或呈现为水平色带（条纹），正确做法是为`html`元素设置`height: 100%`，确保渐变背景拥有足够绘制空间。
在CSS中使用linear-gradient创建背景时，渐变效果依赖于其应用元素的实际渲染尺寸。问题中的代码将渐变直接设在body上，但默认情况下，html和body元素均无明确高度——它们仅包裹内容高度（content-height）。当页面内容极少（如示例中<main>为空）时，body实际渲染高度可能远小于视口，导致渐变被压缩、重复或采样失真，视觉上表现为“断裂成水平条纹”。
关键修复方案是确保根容器具备完整的高度上下文：
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%; /* 或 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：虽然能临时填满视口，但在长页面滚动时，100vh固定为初始视口高，内容超出后底部渐变将缺失或被裁剪；
- ✅ 推荐组合：html { height: 100% } + body { min-height: 100% }，既保证最小覆盖全屏，又允许内容自然撑高；
- ? 移除冗余前缀：现代浏览器已原生支持linear-gradient，-moz-/-webkit-及IE filter可安全移除，精简代码并提升可维护性；
- ? 调试建议：在开发者工具中检查html和body的Computed Height，确认是否为预期值（如100% → 实际像素值）。
此方案不依赖JavaScript，纯CSS驱动，兼容所有现代浏览器，是解决渐变“条纹化”的标准实践。
立即学习“前端免费学习笔记（深入）”；
