如何利用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

<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:

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

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

（学习视频推荐：css视频教程）

4、使用border-shadow

<div class="element4"></div>

.element4{             width: 100px;             height: 100px;             background-color: #009966;             border-radius: 50%;             box-shadow: 0 0 0 50px lightpink ;             margin: auto;         }

<div class="element5">

  .element5{             width: 200px;             height: 200px;             background-color: #009966;             border-radius: 50%;             box-shadow: 0 0 0 50px lightpink inset;             margin: auto;         }

5、使用radial-gradient

<div class="element6"></div>

.element6{             width: 200px;             height: 200px;             border-radius: 50%;             background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);         }

以上就是如何利用css实现圆环效果的详细内容，更多内容请关注技术你好其它相关文章！