操作方法
- 01
看下我们例子的html代码，如图，很简单，就是一个大的div，包含二个div。
<div class="yuan_huan">
<div class="yuan1"></div>
<div class="yuan2"></div>
</div> - 02
看下css样式yuan1， yuan2的定义，如图，主要是通过设置border-radius来让div显示成圆形。
- 03
先看下现在的显示效果，就是二个大小不一的圆。
- 04
把二个圆重叠起来，组成一个圆环。
我们修改下yuan1, yuan2的样式代码，如图，
让二个圆都是绝对定位，position: absolute;
并且设置yuan1的z-index: 2; 让他显示在大圆的上面。 - 05
再加上大div的样式，如图，主要是要让二个圆的位置，是相对这个大div来说的。
- 06
现在的效果如图，还需要调整下小圆的位置。
- 07
改下小圆yuan1的样式代码，调整显示位置，主要是设置样式中的 left, top值，
如图 - 08
现在的效果，就是一个圆环了。
- 09
把小圆的背景色改成和页面的背景色一样，就是一个很标准的圆环了。
background-color: lightblue;
再看下效果， - End
