本文详解线性渐变背景（linear-gradient）常见渲染异常原因，指出因元素高度不足导致渐变被重复平铺而产生红蓝条纹的根源，并提供包含 min-height: 100vh 的标准修复方案及最佳实践。
本文详解线性渐变背景（linear-gradient）常见渲染异常原因，指出因元素高度不足导致渐变被重复平铺而产生红蓝条纹的根源，并提供包含 `min-height: 100vh` 的标准修复方案及最佳实践。
当你在 CSS 中仅写入 background-image: linear-gradient(to top right, red, blue); 却发现页面出现不连续的红蓝条纹（而非平滑过渡），根本原因并非渐变语法错误，而是 body 元素默认高度不足——它仅包裹其子内容（此处为空
），实际高度可能只有几像素。此时浏览器会将该极短高度内的渐变结果自动平铺（repeat）填充整个视口，从而形成明显的彩色“条纹带”。
✅ 正确做法是确保背景容器具备足够且可控的高度。推荐使用 background 简写属性（隐式设置 background-repeat: no-repeat）并配合 min-height: 100vh 强制 body 至少占满整个视口：
body {
background: linear-gradient(to top right, red, blue);
min-height: 100vh;
margin: 0; /* 移除浏览器默认外边距，避免白边 */
color: #fff;
}同时，为保障语义与可访问性，建议在 HTML 中添加可见内容或占位文本：
<body> <div>Linear Gradient Background</div> </body>
⚠️ 注意事项：
- 避免仅使用 background-image 单独声明渐变，务必搭配 background-repeat: no-repeat 或直接使用 background 简写（后者默认不重复）；
- height: 100vh 在部分移动端可能引发滚动条问题，优先选用 min-height: 100vh 更安全；
- 若需全屏渐变且兼容老版本浏览器，可补充 -webkit-linear-gradient 前缀（现代项目通常无需）；
- 渐变方向关键词如 to top right 表示从左下角向右上角过渡；若需严格“左上→右下”，应改用 to bottom right。
通过以上调整，你的线性渐变将真正以单次、完整、响应式的方式覆盖整个可视区域，彻底消除意外条纹。
