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

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 ;        }

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%);        }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。