利用css实现圆环效果的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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

接下来为大家介绍方法:

1,两个标签的嵌套

& lt; div类=癳lement1"比; 　　& lt; div类=癱hild1"祝辞& lt;/div> 　　& lt;/div> .element1 { 　　宽度:200 px; 　　身高:200 px; 　　background - color: lightpink; 　　这个特性:50%; 　　} 　　.child1 { 　　宽度:100 px; 　　身高:100 px; 　　这个特性:50%; 　　background - color: # 009966; 　　位置:相对; 　　上图:50 px; 　　左:50 px; 　　}

2,使用伪元素,前/后

& lt; div类=癳lement2"祝辞& lt;/div> .element2 { 　　宽度:200 px; 　　身高:200 px; 　　background - color: lightpink; 　　这个特性:50%; 　　} 　　.element2:{后　　内容:““; 　　显示:块; 　　宽度:100 px; 　　身高:100 px; 　　这个特性:50%; 　　background - color: # 009966; 　　位置:相对; 　　上图:50 px; 　　左:50 px; 　　}

3,使用边界:

& lt; div类=癳lement3"祝辞& lt;/div> .element3 { 　　宽度:100 px; 　　身高:100 px; 　　background - color: # 009966; 　　这个特性:50%; 　　边界:50 px固体lightpink; 　　}

(学习视频推荐:css视频教程)

4,使用border-shadow

& lt; div类=癳lement4"祝辞& lt;/div> .element4 { 　　宽度:100 px; 　　身高:100 px; 　　background - color: # 009966; 　　这个特性:50%; 　　不必:0 0 0 50 px lightpink; 　　保证金:汽车; 　　}

  .element5 {
　　宽度:200 px;
　　身高:200 px;
　　background - color: # 009966;
　　这个特性:50%;
　　不必:0 0 0 50 px lightpink插图;
　　保证金:汽车;
　　}

5,使用径向渐变

& lt; div类=癳lement6"祝辞& lt;/div> .element6 { 　　宽度:200 px; 　　身高:200 px; 　　这个特性:50%; 　　背景:-webkit-radial-gradient(圆closest-side, # 009966 50%, lightpink 50%); 　　}

关于利用css实现圆环效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。