如何修复 CSS 线性渐变出现水平条纹断层的问题

作者：袖梨 2026-06-13

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; } 组合，即可一劳永逸地解决该问题，同时保持响应式与可扩展性。