【html5/css3】css圆环的六种实现方式

效果图：

html

<div class="circle1">第一种方法</div>
<div class="circle2">第二种方法</div>
<div class="circle3">
    <div class="circle_3">第三种方法</div>
</div>
<div class="circle4">第四种方法</div>
<div class="circle5">第五种方法</div>
<div class="circle6">第六种方法</div>

1.通过伪类实现

.circle1{
    position: relative;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background: white;
    text-align: center;
    margin: 0 auto;
    margin-top: 120px;
}
.circle1::after {
    position: absolute;
    content: '';
    background: linear-gradient(red, yellow);
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: -1;
    transform: scale(1.2);
    border-radius: 50%;
}

2.也是通过伪类，当第一种方法无法实现可以用这种方法

.circle2{
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: linear-gradient(red, yellow);
    text-align: center;
    margin: 0 auto;
    margin-top: 120px;
    z-index: 0;
}
.circle2::after {
    position: absolute;
    content: '';
    background: white;
    height: 84px;
    width: 84px;
    top: 8px;
    left: 8px;
    border-radius: 50%;
    z-index:-1;
}

3.通过盒子嵌套

.circle3 {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(red, yellow);
    text-align: center;
    margin: 0 auto;
    margin-top: 120px;
    z-index: 0;
}
.circle3 .circle_3 {
    position: absolute;
    content: '';
    background: white;
    height: 84px;
    width: 84px;
    line-height: 84px;
    top: 8px;
    left: 8px;
    border-radius: 50%;
    z-index:-1;
}

4.通过border实现

.circle4 {
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    margin: 0 auto;
    margin-top: 120px;
    background-color:#fff;
    border-radius: 50%;
    border: 8px solid red;
}

5.通过阴影实现

.circle5 {
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0 auto;
    margin-top: 120px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 8px red;
}

6.通过背景渐变实现

.circle6 {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
    margin-top: 120px;
    border-radius: 50%;
    background: -webkit-radial-gradient(circle closest-side,#fff 82%,red 18%);
}