HTML开发中,我们可以用图片制作图标,也可以用CSS来生成一些简单的图标,比如正方形,三角形,圆形等等。
但可以生成圆环吗?不能直接生成,但可以通过间接的方法来生成,我们可以通过二个圆来完成。
操作方法
01
看下我们例子的html代码,如图,很简单,就是一个大的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)
声明:该文观点仅代表作者本人,天晴资讯网系信息发布平台,仅提供信息存储空间服务。