css实现圆环效果,利用css实现圆环效果的方法

利用css实现圆环效果的方法

发布时间：2020-08-24 10:16:31

来源：亿速云

阅读：135

作者：小新

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

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

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

接下来为大家介绍方法：

1、两个标签的嵌套

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

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:

width: 100px;

height: 100px;

background-color: #009966;

border-radius: 50%;

border: 50px solid lightpink ;

}

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

4、使用border-shadow

width: 100px;

height: 100px;

background-color: #009966;

border-radius: 50%;

box-shadow: 0 0 0 50px lightpink ;

margin: auto;

}

.element5{

width: 200px;

height: 200px;

background-color: #009966;

border-radius: 50%;

box-shadow: 0 0 0 50px lightpink inset;

margin: auto;

}

5、使用radial-gradient

width: 200px;

height: 200px;

border-radius: 50%;

background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);

}

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