个视频我们来写两个圆环。这个圆环虽然看起来只是普普通通的两个圆，但是认真一看好像又没那么简单，因为它是交错重叠起来的，并且还有一点阴影的效果，看起来比较真实。这个案例其实是UTube上面一个比较知名博主的教学案例，我们不妨来学习一下。

可能很多人也看过，我们今天主要来实现这两个圆环重叠的部分，阴影的部分比较简单，大家可以自己去思考一下。html里面这两个div就是这两个圆环，样式现在写了一些基本的样式，其它样式重新来写。

·先来把这两个圆环的基础样式写出来，两个圆有了，然后把其中一个变成红色，再让它们先简单的重叠一下，控制一下第二个圆环，调整一下它的边框颜色就可以了，把它变成红色。

·再往左边移动60像素，先简单重叠起来。现在两个圆只是简单的重叠，我们要怎么样实现这种交错重叠？就好像两个圆环是穿起来的这种感觉。这里分别给这两个圆环加个伪元素，我们是可以通过定位把一个盒子撑起来的。

·这里给它设置一下inset，关键就是inset设置为多少合适。如果是设置为0，也就是四个方向都是设为0，按道理应该是和父元素完全重叠的(没border的话)。

·加个边框看一下，很明显它并没有和白色圆环完全重叠，而是在它里面。这是因为我们看到的这两个圆环，看到的只是border边框的区域。inset的设置为0，它只不过是贴在content内容区域里面，所以伪元素我们要把它扩大才可以。

·这里要调整一下inset的值，0是刚好贴满content的区域，设置为正值它是收缩的，所以这里设置为-25px。现在和白色的圆环就一样大了，只不过一个正方形一个圆形，等一下把伪元素调整成圆的就可以了。

·然后单独来设置一下上边框，同样也是白色的边框，还有右边框也单独设置一下。ok，再把另外两条边框设置为透明。现在左边和下边就看不到了，再把它设置成一个圆，这样它就可以和第一个圆环完全重叠起来了。

·现在伪元素这半个圆环就和本来的圆环完全重叠起来，那有什么用？还是和原来的一样，但是现在就可以单独给伪元素这半个圆环设置层级了，把层级调高一点，这样这一段圆环它就可以盖在上面，然后再给它旋转一下位置，让它旋转负的四十五度，这样两个圆环贯穿重叠起来的效果就完成了。

其实就是借助了一个伪元素做了一个障眼法，如果想实现圆环交汇的地方有点阴影的效果，也可以多写两个伪元素来实现，这个大家可以自己来思考一下。

这个视频就到这里，感谢大家的收看。

近在做一小程序，看有的APP上表示完善度的进度环不错，想在小程序和网站上实现，又想尽量不增加加载时间，这里弄了个纯CSS的，在小程序和网站上都跑通了，参考了网上的一些个例子，这里总结一下

HTML:

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(--9deg);"></div><!--9deg 从左到右数 -135到45，一共180度-->

</div>

<div class="text">7<br>完善度</div>

</div>

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(9deg);"></div>

<!--从左到右读数 -135到45，一共180度-->

</div>

<div class="text">8<br>完善度</div>

</div>

CSS:

.blockOut0 { width: 40px; height: 40px; position: relative; overflow:hidden; margin:20px auto}

.block { width: 40px; height: 40px; border-left:4px solid #f60; border-top:4px solid #f60; border-right:4px solid #ccc; border-bottom:4px solid #ccc; border-radius: 50%; box-sizing: border-box;}

.blockOut { width: 40px; height:20px; overflow: hidden;}

.text { text-align: center; top: 8px; position: absolute; width: 100%; color:#f60; font-size:9px}