怎么在css3中使用clip实现一个圆环进度条

这期内容当中小编将会给大家带来有关怎么在css3中使用clip实现一个圆环进度条，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联建站专业为企业提供临汾网站建设、临汾做网站、临汾网站设计、临汾网站制作等企业网站建设、网页设计与制作、临汾企业网站模板建站服务，10年临汾做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

实现思路

圆环很简单，一行cssborder-radius:50%即可实现，而且没有兼容性问题，什么，你说IE，让它滚...

我们这里需要三个圆环，一个整的，两个半的。大概画了下图

这里半圆环我使用了clip进行裁剪，主要代码如下,

.left{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;   /* 10的原因是因为边框是10个像素 */
    right: -10px;
    clip: rect(0 100px 200px 0);  /* 上面为0 右边到100px 下面200px 左边到0 这个区域的我们裁剪出来 */ 
}

右边类似只是裁剪位置改了

.right{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;  /* 10的原因是因为边框是10个像素 */
    right: -10px;
    clip: rect(0 200px 200px 100px);  /* 位置更改，计算可以参考上图 */ 
}

完整代码