使用CSS的border-radius和linear-gradient可创建美观的进度条。1. HTML结构由外层容器和内层进度块组成，通过width控制进度；2. 为容器和进度条添加border-radius实现圆角效果，配合overflow: hidden防止溢出；3. 使用linear-gradient设置渐变背景，如to right, #a8e6a3, #4caf50增强视觉层次；4. 添加transition: width 0.4s ease-in-out实现平滑动画效果，提升用户体验。

进度条是网页中常见的UI元素，使用CSS可以轻松实现美观且现代化的效果。通过background: linear-gradient和border-radius，我们可以让基础进度条更具视觉吸引力。

1. 基础结构：HTML搭建进度条

一个简单的进度条通常由外层容器和内层进度块组成：

HTML代码：

  

外层.progress-container控制整体样式和边界，内层.progress-bar表示当前进度，通过width控制填充比例。

立即学习“前端免费学习笔记（深入）”；

2. 使用border-radius打造圆角效果

给进度条添加圆角可以让它看起来更柔和、现代。推荐在外层和内层都设置border-radius：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.progress-container {
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #4caf50;
  border-radius: 6px;
}

注意：外层设置overflow: hidden确保内层圆角不会溢出边界。

3. 使用linear-gradient丰富背景色

用linear-gradient替代纯色背景，可以让进度条更有层次感。例如创建一个从左到右的绿色渐变：

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #a8e6a3, #4caf50);
  border-radius: 6px;
}

也可以尝试其他方向或颜色组合：

• linear-gradient(45deg, #ff9a9e, #fecfef) —— 暖色调斜向渐变
• linear-gradient(to right, #4facfe, #00f2fe) —— 清新蓝水彩风

4. 添加动画效果提升体验

结合CSS过渡，让进度变化更平滑：

.progress-bar {
  transition: width 0.4s ease-in-out;
}

当JavaScript动态修改width时，进度会流畅增长，避免突兀跳变。

基本上就这些。合理运用border-radius和linear-gradient，即使是初级项目也能做出专业感十足的进度条。关键是保持简洁，避免过度设计影响可读性。