本文详解为何直接设置 linear-gradient 可能出现色带条纹（banding）或显示异常，并提供完整解决方案：修正方向语法、确保容器高度充足、避免默认样式干扰。
本文详解为何直接设置 `linear-gradient` 可能出现色带条纹（banding）或显示异常，并提供完整解决方案：修正方向语法、确保容器高度充足、避免默认样式干扰。
在 CSS 中使用 linear-gradient 创建背景时，看似简单的一行代码却常因几个关键细节而失效——最典型的表现就是本例中描述的“红蓝交替的横向条纹”，而非平滑过渡的对角渐变。问题根源并非渐变本身出错，而是渲染上下文缺失。
首先，方向语法需准确对应预期效果。原代码中写的是 to top right，这表示渐变起点在右下角、终点在左上角（即从右下向左上延伸），实际效果是反向对角线；若希望“从左上到右下”，应使用 to bottom right：
body {
background: linear-gradient(to bottom right, red, blue);
}其次，也是最关键的： 默认高度不足。浏览器默认将
高度设为内容高度（此处为空 div），导致渐变仅在几像素高内重复平铺（background 默认 repeat），从而产生明显的红蓝色带。解决方法是强制赋予最小视口高度，并禁用重复：
body {
margin: 0; /* 移除默认外边距，避免白边 */
min-height: 100vh;
background: linear-gradient(to bottom right, red, blue);
background-repeat: no-repeat; /* 显式禁止平铺，更安全 */
}同时建议为
添加基础内容与样式以验证效果：
<body>
<div style="padding: 2rem; color: white; font-family: sans-serif;">
Linear Gradient Background (Top-Left → Bottom-Right)
</div>
</body>✅ 最佳实践总结：
- 使用 background（而非 background-image）简写，自动覆盖 background-repeat 和 background-size 默认值；
- 始终设置 min-height: 100vh + margin: 0 保证全屏渲染；
- 方向关键词务必匹配设计意图：to bottom right = 左上→右下，to top left = 右下→左上；
- 如需更高精度控制，可改用角度（如 45deg）替代方向关键词，语义更明确。
这样即可获得真正平滑、无条纹、覆盖全屏的线性渐变背景。
