在进度条组件中，中间突出效果可以让进度展示更有视觉重点，提升用户的交互感知。这种效果不需要额外增加多余的DOM结构，仅通过CSS的基础属性就能实现，下面介绍两种常用的实现方案。
方案一：使用线性渐变实现中间突出
线性渐变可以自定义背景的颜色分布，通过在进度条背景的中间区域设置更亮的颜色，就能形成突出效果。这种方式兼容性好，不需要额外的伪元素。
基础进度条结构
首先定义基础的进度条容器和进度填充元素：
<div class="progress-container"> <div class="progress-bar" style="width: 60%;"></div> </div>
CSS样式实现
给进度填充元素设置线性渐变背景，中间区域使用更亮的颜色：
.progress-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
/* 线性渐变：左右两侧为普通颜色，中间20%区域为亮色突出 */
background: linear-gradient(
to right,
#4a90e2 0%,
#4a90e2 40%,
#6ab0ff 40%,
#6ab0ff 60%,
#4a90e2 60%,
#4a90e2 100%
);
border-radius: 10px;
transition: width 0.3s ease;
}
方案二：使用伪元素实现中间突出
如果需要突出效果的形状更灵活，比如圆形、菱形等，可以使用伪元素在进度条中间添加额外的元素，这种方式的可定制性更强。
HTML结构
和方案一的结构一致，不需要额外增加DOM节点：
<div class="progress-container"> <div class="progress-bar" style="width: 60%;"></div> </div>
CSS样式实现
通过::after伪元素在进度条中间位置添加突出元素：
.progress-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: visible;
position: relative;
}
.progress-bar {
height: 100%;
background-color: #4a90e2;
border-radius: 10px;
transition: width 0.3s ease;
position: relative;
}
/* 伪元素实现中间突出效果 */
.progress-bar::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
两种方案的对比
可以通过下面的表格了解两种方案的差异，选择适合自己项目的方案：
| 方案 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| 线性渐变方案 | 兼容性好，无额外渲染节点，性能高 | 突出形状受限，只能是渐变颜色块 | 只需要颜色突出的简单进度条 |
| 伪元素方案 | 突出形状灵活，可自定义大小、颜色、阴影 | 需要定位计算，低版本浏览器可能有兼容问题 | 需要特殊形状突出的复杂进度条 |
注意事项
- 使用伪元素方案时，进度条容器的
overflow属性需要设置为visible，否则伪元素可能被裁剪。 - 如果进度条宽度动态变化，伪元素的定位会自动跟随进度条宽度变化，不需要额外调整。
- 渐变方案中的颜色比例需要根据实际突出区域的大小调整，避免出现颜色断层。