如何利用css实现圆环效果

css实现圆环效果有多种方法,这里为大家分享五种方法:

(推荐教程:CSS教程)

首先我们来看一下实现效果:

接下来为大家介绍方法:

1、两个标签的嵌套

<div class="elemenf w m $ M # O }t1">
<div class="child1"></div>
</divl / X>
.eleme3 h ~ Unt1{
width: 200px;
height: 200px;
background-n ( $ i p ; Y lcolor: lightpink;
border-radius: 50%;
}
.child1{
width: 100px;
heio _ ( N !ght: 100px;
border-radius: 50%;
background-color: #009966;
position: relative;
top: 50px;
left: 50px;
}

2、7 Y 6 v 4 A使用伪元素,before/after

<div class="element2">&6 & $ 2lt;/div>
.element2{
width: 200px;
height: 200px;
background-coG K wlor: lightpink;
borw $ : # Q nder-radius: 50%;
}
.element2:after{
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: # ; d L h p G009966;
position: re N * T = 3 # L .lative;
top: 50px;
left: 50px;
}

3、使用border:

<div class="element| : o 1 0 !3"></div>
 .element3{
width: 100px;
height: 100px;
background-color: #009966;
borderZ l ` % 1-radius: 50%;
boW S N ` 1  P Crder: 50px solid lightpink ;
}

R L * T T ^ * ? 7学习视频推荐:css视频教程)

4、使用border-b b Z 0 9 J * x cshadow

<div class="element4">&l! 0 2 o Y Lt;. B L H - j ! /div>
.element4{
width: 100px;
height:U M t ( / C 3 Q u 100px;
background-color: #009966;
border-radius: 50%;
box-shado6 ~ pw: 0 0 0 50px lightpink ;
margh * ~in: auto;
}
<div class="element5">c z B y i;
  .element5{
width: 200px;
height: 200px;
background-color: #009966;
border-radius: 50%;
box-shadow: 0 0 0 50px lightpink inseu ~ 0 I 6t;
margin: auto;
}

5、使用radial-gradient

<div classE f ] 3 ) 5 d="element6} I C c ? x 0"></div>
.element6{
widtk d p t ah: 200px;
heq b F [ 9 _ k L 1ight: 200px;
bory S Yder-radius: 50%;
background: -webkit-radial-gradientZ @ 5 S i G ) i B( circle closest-side,#009966 50%,lightpink 50%);
}

以上就是如何利用B $ # 3css实现圆环/ r O n o U Y S Z效果的详细内容。