HTML开发中 ， 我们可以用图片制作图标 ， 也可以用CSS来生成一些简单的图标 ， 比如正方形 ， 三角形 ， 圆形等等 。 <br/>但可以生成圆环吗？不能直接生成 ， 但可以通过间接的方法来生成 ， 我们可以通过二个圆来完成 。 操作方法 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 【用css如何制作圆环？】改下小圆yuan1的样式代码 ， 调整显示位置 ， 主要是设置样式中的 left, top值 ，
如图
文章插图
08 现在的效果 ， 就是一个圆环了 。
文章插图
09 把小圆的背景色改成和页面的背景色一样 ， 就是一个很标准的圆环了 。
background-color: lightblue;
再看下效果 ，
文章插图
以上内容就是用css如何制作圆环？的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- Excel如何设置字体大小粗细颜色和底色
- CELL函数与OFFSET函数及AVERAGE函数的结合使用
- Word2010如何导入文档样式库中的标题样式
- 如何用CAD画花瓶？
- 为什么一用散粉，底妆皮肤就变干燥？
- 柚子的功效与作用
- 打孩子真的管用吗?6招有效管教熊孩子
- 相亲看对眼了，如何增进彼此感情
- 经验总结：粉饼可以这么用
- 甘蔗的功效与作用是什么