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

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

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

接下来为大家介绍方法：

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

（学习视频推荐：css视频教程）

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

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