本文共 931 字，大约阅读时间需要 3 分钟。

为了实现仅使用 CSS 创建顶部黄色滚动进度条效果，可以利用线性渐变和伪元素。以下是分步骤的实现方法：

下面是实现代码：

说明：

• bodyсторona：

  设置 background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%) 创建了一个从黄色 (#ffcc00) 到浅黄色 (#eee) 的垂直线性渐变。使用 background-size: 100% calc(100% - 100vh + 5px) 确保渐变在滚动到底部时与视口完美贴合。

• 为body添加的伪元素：

  • content: "" 创建了一个空白的内容。
  • position: fixed; top: 0; left: 0; right: 0; bottom: 0 使伪元素覆盖整个视口，并始终位于页面顶部。
  • background-image 和 background-size 与 body 一致，确保紫色条仍然显示出渐变效果。
  • z-index: -1 使得伪元素位于页面内容的下方，便于内容正确显示。

• 内容边缘：

  通过将 border: 1px solid rgba(255, 255, 0, 0.3) 设置为半透明黄色，产生一个细边缘效果，使视觉上更加明确。

通过以上 CSS 样式，页面顶部将显示一个向下滚动的黄色进度条，随着页面滚动，其长度和位置也会相应改变，给用户视觉提示。