【大前端】使用纯CSS实现进度条

background: radial-gradient(
                    circle at center,
                    #ffffff 0%,
                    #ffffff 50%,
                    #fd4e4e 50%,
                    #fd4e4e 70%,
                    transparent 70%
                )
                50% center/13px 13px no-repeat,
            linear-gradient(90deg, #fd4e4e 0%, #fd4e4e 100%) left
                center/50% 9px no-repeat,
            linear-gradient(90deg, #efbbbb 0%, #efbbbb 100%) center
                center/100% 9px no-repeat;

1. radial-gradient: 绘制进度条圆点；这里通过白色填充圆点内部，红色绘制边框，每更换一种颜色时，新颜色要从上一个颜色的结束位置开始（例如：白色结束位置是50%，那么红色开始位置就是50%）；最后的transparent 是为了将面板其余部分绘制为透明色，因为圆点实际是一个正方形面板
2. linear-gradient: 第一个linear-gradient是绘制进度条，第二个linear-gradient是绘制进度条背景填充色
3. background 属性值中，前面的图层会覆盖后面的图层，例如：radial-gradient > linear-gradient(1) > linear-gradient(2)
4. 圆点的偏移是通过background-position属性设置的，进度条的宽度是通过background-size属性设置的