显/隐菜单

用css如何制作圆环?

HTML开发中,我们可以用图片制作图标,也可以用CSS来生成一些简单的图标,比如正方形,三角形,圆形等等。
但可以生成圆环吗?不能直接生成,但可以通过间接的方法来生成,我们可以通过二个圆来完成。

01、看下我们例子的html代码,如图,很简单,就是一个大的div,包含二个div。
<divclass="yuan_huan">
<divclass="yuan1"></div>
<divclass="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;
再看下效果,