实现CSS圆环的5种方法(小结)

想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。

1. 两个标签的嵌套：

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

.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

<p class="element2"></p>

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

<p class="element3"></p>

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

4. 使用border-shadow

<p class="element4"></p>

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

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

<p class="element6"></p>

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

如果大家有其他的方法，请告诉我吧，谢谢！！！

总结：