GitHub Pages中CSS径向渐变莫名出现水平线问题求助

本地正常的径向渐变背景部署到GitHub Pages后出现水平线，通常是元素高度不足导致背景重复渲染，或是浏览器渲染拼接差异引发的。以下是具体修复方案：

核心修复代码 #

修改CSS，补充高度控制与背景属性：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  background-image: radial-gradient(79.75% 134.25% at 95.71% 100%, #000b6b 0, #0057b8 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

修复说明 #

• margin: 0; padding: 0：清除浏览器默认边距，避免留白干扰背景渲染
• height: 100%; min-height: 100vh：确保html和body高度覆盖整个视口，即使页面内容不足也不会缩短背景高度
• background-repeat: no-repeat：禁止背景重复，避免因高度不足导致渐变拼接出水平线
• background-size: cover：让渐变背景自适应视口尺寸，保持渐变比例不变形
• background-attachment: fixed：固定背景位置，滚动页面时不会重新渲染背景，减少线条出现的可能

备选简化方案 #

若仅需在body上应用渐变，可将html设置为渐变起始色作为兜底：

html {
  height: 100%;
  background-color: #000b6b;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: radial-gradient(79.75% 134.25% at 95.71% 100%, #000b6b 0, #0057b8 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

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