如何在HTML中创建平滑渐变背景？渐变断层问题排查

我目前正在练习代码，使用w3schools进行学习，尝试为页面创建绿黄色渐变背景，但最终效果出现断层（choppy），希望有人能帮忙排查原因。我的代码如下：

CSS代码 #

* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to bottom, #66ff99 0%, #ffff99 100%)
}

.header {
  overflow: hidden;
  background-color: transparent;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #7FFFD4;
  color: white;
}

.header a.active {
  background-color:#7FFFD4;
  color: black;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}

HTML代码 #

<div class="header">
  <a href="#default" class="logo">CompanyLogo</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

<div style="padding-left:20px">
  <h1>Responsive Header</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>Some content..</p>
</div>

渐变出现断层的核心原因是body元素未占满整个视口高度：默认情况下body高度仅由内部内容撑开，当页面内容较少时，渐变只覆盖到内容底部，剩余空白区域会重复渐变（默认background-repeat: repeat），视觉上呈现断层效果。

只需修改body的CSS样式即可解决：

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to bottom, #66ff99 0%, #ffff99 100%);
  min-height: 100vh; /* 让body至少占满视口高度 */
  background-repeat: no-repeat; /* 禁止渐变重复 */
}

关键样式说明 #

• min-height: 100vh：100vh等于当前浏览器窗口的高度，确保body高度至少覆盖整个视口，不会因内容不足而缩短
• background-repeat: no-repeat：避免渐变在内容未填满视口时重复渲染，彻底消除断层

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