空 格

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

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;

plain
radial-gradient

: 绘制进度条圆点；这里通过白色填充圆点内部，红色绘制边框，每更换一种颜色时，新颜色要从上一个颜色的结束位置开始（例如：白色结束位置是50%，那么红色开始位置就是50%）；最后的

plain
transparent

是为了将面板其余部分绘制为透明色，因为圆点实际是一个正方形面板 2.

plain
linear-gradient:

第一个

plain
linear-gradient

是绘制进度条，第二个

plain
linear-gradient

是绘制进度条背景填充色 3.

plain
background

属性值中，前面的图层会覆盖后面的图层，例如：

plain
radial-gradient > linear-gradient(1) > linear-gradient(2)
  1. 圆点的偏移是通过
plain
background-position

属性设置的，进度条的宽度是通过

plain
background-size

属性设置的