这个视频我们来写两个圆环。这个圆环虽然看起来只是普普通通的两个圆，但是认真一看好像又没那么简单，因为它是交错重叠起来的，并且还有一点阴影的效果，看起来比较真实。这个案例其实是UTube上面一个比较知名博主的教学案例，我们不妨来学习一下。
可能很多人也看过，我们今天主要来实现这两个圆环重叠的部分，阴影的部分比较简单，大家可以自己去思考一下。html里面这两个div就是这两个圆环，样式现在写了一些基本的样式，其它样式重新来写。
·先来把这两个圆环的基础样式写出来，两个圆有了，然后把其中一个变成红色，再让它们先简单的重叠一下，控制一下第二个圆环，调整一下它的边框颜色就可以了，把它变成红色。
·再往左边移动60像素，先简单重叠起来。现在两个圆只是简单的重叠，我们要怎么样实现这种交错重叠？就好像两个圆环是穿起来的这种感觉。这里分别给这两个圆环加个伪元素，我们是可以通过定位把一个盒子撑起来的。
·这里给它设置一下inset，关键就是inset设置为多少合适。如果是设置为0，也就是四个方向都是设为0，按道理应该是和父元素完全重叠的(没border的话)。
·加个边框看一下，很明显它并没有和白色圆环完全重叠，而是在它里面。这是因为我们看到的这两个圆环，看到的只是border边框的区域。inset的设置为0，它只不过是贴在content内容区域里面，所以伪元素我们要把它扩大才可以。
·这里要调整一下inset的值，0是刚好贴满content的区域，设置为正值它是收缩的，所以这里设置为-25px。现在和白色的圆环就一样大了，只不过一个正方形一个圆形，等一下把伪元素调整成圆的就可以了。
·然后单独来设置一下上边框，同样也是白色的边框，还有右边框也单独设置一下。ok，再把另外两条边框设置为透明。现在左边和下边就看不到了，再把它设置成一个圆，这样它就可以和第一个圆环完全重叠起来了。
·现在伪元素这半个圆环就和本来的圆环完全重叠起来，那有什么用？还是和原来的一样，但是现在就可以单独给伪元素这半个圆环设置层级了，把层级调高一点，这样这一段圆环它就可以盖在上面，然后再给它旋转一下位置，让它旋转负的四十五度，这样两个圆环贯穿重叠起来的效果就完成了。
其实就是借助了一个伪元素做了一个障眼法，如果想实现圆环交汇的地方有点阴影的效果，也可以多写两个伪元素来实现，这个大家可以自己来思考一下。
这个视频就到这里，感谢大家的收看。