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

首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：CSS Code复制内容到剪贴板.circleprogress{

width:160px;

height:160px;

border:20pxsolidred;

border-radius: 50%;

}

然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：CSS Code复制内容到剪贴板.circleprogress{

width:160px;

height:160px;

border:20pxsolidred;

border-left:20pxsolidtransparent;

border-bottom:20pxsolidtransparent;

border-radius: 50%;

}

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

OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：CSS Code复制内容到剪贴板.circleProgress_wrapper{

width:200px;

height:200px;

margin:50pxauto;

position:relative;

border:1pxsolid#ddd;

}

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：XML/HTML Code复制内容到剪贴板