使⽤css制作⼀个简易的圆环进度条//进度为0%
<div class="wrap">
//⼤于180，则class=clip-auto circle，否则：circle
<div class="circle">
//度数为：当前进度*3.6
<div class="percent left" ></div>
//⼤于180，则class=percent right，否则为percent right wth0
<div class='percent right wth0'></div>
</div>
<div class="num">
<p class="littleAccuracy">0%</p>
<p>正确率</p>
</div>
</div>
//进度为30%
<div class="wrap">
//⼤于180，则class=clip-auto circle，否则：circle
<div class="circle">
//度数为：当前进度*3.6  现在为30*3.6
<div class="percent left" </div>
//⼤于180，则class=percent right，否则为percent right wth0
<div class='percent right wth0'></div>
</div>
<div class="num">
<p class="littleAccuracy">30%</p>
<p>正确率</p>
</div>
</div>
//进度为50%
<div class="wrap">
//⼤于180，则class=clip-auto circle，否则：circle
<div class="circle">
//度数为：当前进度*3.6
<div class="percent left" ></div>
//⼤于180，则class=percent right，否则为percent right wth0
<div class='percent right wth0'></div>
</div>
<div class="num">
<p class="littleAccuracy">50%</p>
<p>正确率</p>
</div>
</div>
//进度为80%
<div class="wrap">
/
/⼤于180，则class=clip-auto circle，否则：circle
<div class="circle clip-auto">
//度数为：当前进度*3.6
<div class="percent left" ></div>
//⼤于180，则class=percent right，否则为percent right wth0
<div class='percent right'></div>
</div>
<div class="num">
<p class="accuracy">80%</p>
<p>正确率</p>
</div>
</div>
.wrap{width:116px;height:116px;position:relative;background-color:#d7e3f2;-moz-border-radius:50%;border-radius:50%;margin:0 auto}
.wrap .circle,.wrap .percent{position:absolute;width:116px;height:116px;-moz-border-radius:50%;border-radius:50%}
.wrap .circle{box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;border:6 px solid #d7e3f2;clip:rect(0,116px,116px,58px)}
.wrap .circle .left{border:6px solid #ff6349;clip:rect(0,58px,116px,0)}
.wrap .circle .right{border:6px solid #ff6349;clip:rect(0,116px,116px,58px)}
.wrap .clip-auto{clip:rect(auto,auto,auto,auto)}
.wrap .clip-auto .left{border:6px solid #20ceb2;clip:rect(0,58px,116px,0)}
.wrap .clip-auto .right{border:6px solid #20ceb2;clip:rect(0,116px,116px,58px)}
.wrap .percent{box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;top:-6 px;left:-6px}
.wrap .wth0{width:0}
.wrap .num{position:absolute;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:bor der-box;width:104px;height:104px;text-align:center;font-size:20px;color:#4e5656;left:6px;top:6px;-moz-border-radius:50%;border-radius:50%;background: #fff;z-index:1}
.wrap .num .accuracy,.wrap .num .littleAccuracy{font-size:30px;margin:28px 02px}
.wrap .num .accuracy{color:#28c8af}borderbox
.wrap .num .littleAccuracy{color:#ff6349}
效果图