在CSS初级项目里，进度条是展示任务完成度、加载状态的常用组件，默认的进度条样式单一，通过background的linear-gradient线性渐变和border-radius圆角属性，就能快速实现美观的进度条效果。
基础进度条的实现
首先我们需要搭建进度条的基础结构，外层容器作为进度条的背景，内层元素作为进度填充部分，通过控制内层元素的宽度来展示进度比例。
<div class="progress-container"> <div class="progress-bar" style="width: 60%;"></div> </div>
接下来给基础结构添加基础样式，先设置外层容器的背景和尺寸，再设置内层进度条的初始样式：
/* 进度条外层容器 */
.progress-container {
width: 100%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden; /* 让内层圆角生效 */
}
/* 进度条填充部分 */
.progress-bar {
height: 100%;
background-color: #4CAF50;
transition: width 0.3s ease; /* 宽度变化添加过渡效果 */
}
这里的border-radius: 10px让外层容器变成圆角矩形，overflow: hidden保证内层进度条的圆角不会超出外层容器，初始的进度条是单一颜色的圆角样式。
用linear-gradient添加渐变效果
linear-gradient是CSS的线性渐变函数，可以设置多种颜色按指定方向过渡，我们用它来替换进度条的单一背景色，让进度条更有层次感。
linear-gradient的基础语法是linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ...)，方向可以是角度比如45deg，也可以是关键词比如to right表示从左到右渐变。
我们修改.progress-bar的背景属性，实现从左到右的蓝绿渐变：
.progress-bar {
height: 100%;
/* 从左到右渐变，从浅蓝到深绿 */
background: linear-gradient(to right, #2196F3, #4CAF50);
transition: width 0.3s ease;
}
如果想要更丰富的渐变效果，可以添加多个颜色节点，比如实现三色渐变：
.progress-bar {
height: 100%;
/* 三色渐变，从左到右依次为浅紫、浅蓝、浅绿 */
background: linear-gradient(to right, #9C27B0, #2196F3, #4CAF50);
transition: width 0.3s ease;
}
结合border-radius优化细节
除了外层的圆角，我们还可以给进度条添加更细致的圆角设置，比如让进度条只在左侧有圆角，右侧跟随宽度变化保持直角，更符合实际的使用场景。
我们可以把外层容器的overflow: hidden去掉，单独给进度条设置左侧圆角：
.progress-container {
width: 100%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
/* 去掉overflow属性 */
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #2196F3, #4CAF50);
transition: width 0.3s ease;
/* 只设置左侧圆角，右侧保持直角 */
border-radius: 10px 0 0 10px;
}
如果进度条宽度达到100%，需要右侧也显示圆角，我们可以通过属性选择器判断进度条的宽度，当宽度为100%时补全右侧圆角：
/* 当进度条宽度为100%时，右侧也显示圆角 */
.progress-bar[style*="width: 100%"] {
border-radius: 10px;
}
完整示例代码
下面是一个可以直接运行的完整示例，包含渐变圆角进度条和简单的进度控制按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化进度条示例</title>
<style>
.progress-container {
width: 80%;
height: 24px;
background-color: #e8e8e8;
border-radius: 12px;
margin: 20px auto;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #FF9800, #F44336);
border-radius: 12px 0 0 12px;
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 8px;
color: #fff;
font-size: 12px;
box-sizing: border-box;
}
.progress-bar[style*="width: 100%"] {
border-radius: 12px;
}
.btn-group {
text-align: center;
margin-top: 20px;
}
.btn-group button {
margin: 0 10px;
padding: 6px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar" style="width: 30%;">30%</div>
</div>
<div class="btn-group">
<button onclick="changeProgress(-10)">减少10%</button>
<button onclick="changeProgress(10)">增加10%</button>
</div>
<script>
function changeProgress(step) {
const bar = document.getElementById('progressBar');
let currentWidth = parseInt(bar.style.width);
let newWidth = currentWidth + step;
// 限制宽度在0到100之间
newWidth = Math.max(0, Math.min(100, newWidth));
bar.style.width = newWidth + '%';
bar.textContent = newWidth + '%';
}
</script>
</body>
</html>
常见问题说明
- 如果渐变效果不显示，检查linear-gradient的语法是否正确，颜色之间用逗号分隔，方向参数不要写错。
- 如果圆角效果不生效，检查是否设置了
overflow: hidden或者进度条的圆角属性是否正确，避免内外层圆角冲突。 - 进度条的过渡效果可以通过调整transition的属性值，改变宽度变化的动画时长和缓动函数。
CSSlinear-gradientborder-radius进度条美化修改时间：2026-07-24 13:24:32