前端 圆形进度图_实现环形进度条的几种方法

环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。

DIV + CSS3

这个是最基本的实现方式，我在想怎样用尽量少的DOM结构来实现，最终还是用了三个div，不过这个方法仅供开阔思路，样式表现在PC还好，手机上的问题就多了，仅供参考。

1、利用div的border画一个背景的圆环

/* css */

.demo1-bg1{

width: 100px;

height: 100px;

display: -webkit-box;

-webkit-box-pack: center;

-webkit-box-align: center;

margin: 50px auto;

background: fff;

border-radius: 50%;

box-shadow: 0 0 0 10px red inset;

}

2、添加两个子元素div，分别设置border来实现两个半圆环并遮盖背景圆环

/* css */

.demo1-bg2-1,.demo1-bg2-2{

position: relative;

margin: 0;

padding: 0;

-webkit-box-flex: 1;

height: 80px;

backgrou

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！