如何消除渐变背景滚动时底部出现的分割线？

你的问题出在CSS背景的默认重复行为上：当页面内容高度超过渐变背景的初始绘制范围时，background-repeat: repeat会重复拼接渐变块，而你的渐变没有实现无缝循环，因此出现了明显的分割线。

以下是两种可靠的解决方法：

方法一：固定背景到视口（推荐） #

通过将背景固定在浏览器视口，避免随页面滚动而重复拼接，这是最直接的解决方案：

body {
  background: 
    -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), 
    linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), 
    linear-gradient(135deg, #670d10 0%,#092756 100%);
  background-attachment: fixed; /* 核心：背景固定于视口，不随滚动移动 */
  background-size: cover; /* 确保背景始终覆盖整个视口 */
  min-height: 100vh; /* 保证body至少占满视口高度 */
}

原理 #

background-attachment: fixed让背景相对于浏览器视口定位，无论页面如何滚动，背景都不会发生位移或重复，从根源上消除了拼接分割线。background-size: cover确保背景自适应视口尺寸，避免出现空白区域。

方法二：让渐变实现无缝循环（适合需要背景随滚动移动的场景） #

如果需要背景随页面滚动，可以调整渐变的色标，让渐变的结束颜色与起始颜色匹配，或者将渐变的高度设置为足够大的值：

body {
  background: 
    -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), 
    linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), 
    linear-gradient(135deg, #670d10 0%,#092756 100%);
  background-repeat: no-repeat; /* 禁止重复 */
  background-size: 100% 200vh; /* 设置足够大的背景高度，覆盖可能的滚动区域 */
}

原理 #

通过设置远大于页面最大可能高度的background-size，让渐变只绘制一次，避免重复拼接；或者调整渐变的色标，让最后一个颜色与第一个颜色一致，实现无缝重复。

内容的提问来源于stack exchange，提问作者Sogetsue