利用css实现圆环效果的方法
这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司专注于企业成都全网营销、网站重做改版、肃州网站定制设计、自适应品牌网站建设、H5网站设计、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为肃州等各大城市提供网站开发制作服务。
css实现圆环效果有多种方法,这里为大家分享五种方法:
首先我们来看一下实现效果:
接下来为大家介绍方法:
1、两个标签的嵌套
.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
.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:
.element3{ width: 100px; height: 100px; background-color: #009966; border-radius: 50%; border: 50px solid lightpink ; }
(学习视频推荐:css视频教程)
4、使用border-shadow
.element4{ 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
.element6{ width: 200px; height: 200px; border-radius: 50%; background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%); }关于利用css实现圆环效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用css实现圆环效果的方法
标题来源:http://scyanting.com/article/jsgche.html