如何自制圆环_用css如何制作圆环？，大师来详解

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)

声明：该文观点仅代表作者本人，天晴资讯网系信息发布平台，仅提供信息存储空间服务。