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