如何利用css实现圆环效果-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

css实现圆环效果有多种方法，这里为大家分享五种方法：

（推荐教程：CSS教程）

首先我们来看一下实现效果：

接下来为大家介绍方法：

1、两个标签的嵌套

<div class="element1">
    <div class="child1"></div>
</div>

.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

2、使用伪元素，before／after

1	`<div` `class="element2"></div>`

.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

3、使用border:

1	`<div` `class="element3"></div>`

.element3{
           width: 100px;
           height: 100px;
           background-color: #009966;
           border-radius: 50%;
           border: 50px solid lightpink ;
       }