首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:
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复制内容到剪贴板