图解CSS3制作圆环形进度条的实例教程

首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：

</div>

1. .circleprogress{   
2.     width: 160px;   
3.     height: 160px;   
4.     border:20px solid red;   
5.     border-radius: 50%;   
6. }  

</div> </div>

然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：

</div>

1. .circleprogress{   
2.   width: 160px;   
3.   height: 160px;   
4.   border:20px solid red;   
5.   border-left:20px solid transparent;   
6.   border-bottom:20px solid transparent;   
7.   border-radius: 50%;   
8. }  

</div> </div>

然后还是会说，这个也不难啦。可是，如果不是刚好都是45度的倍数呢？

OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：

</div>

1. .circleProgress_wrapper{   
2.   width: 200px;   
3.   height: 200px;   
4.   margin: 50px auto;   
5.   position: relative;   
6.   border:1px solid #ddd;   
7. }  

</div> </div>

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：

</div>

1. <div class="circleProgress_wrapper">  
2.         <div class="wrapper right">  
3.             <div class="circleProgress rightcircle"></div>  
4.         </div>  
5.         <div class="wrapper left">  
6.             <div class="circleProgress leftcircle"></div>  
7.         </div>  
8.  </div>  

</div> </div> </div>

1. .wrapper{   
2.   width