利用css实现圆环效果的方法-创新互联
这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司是一家专注于成都网站设计、成都网站建设与策划设计,额济纳网站建设哪家好?创新互联公司做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:额济纳等地区。额济纳做网站价格咨询:18980820575css实现圆环效果有多种方法,这里为大家分享五种方法:
首先我们来看一下实现效果:
接下来为大家介绍方法:
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://myzitong.com/article/jpsdc.html