本文摘自PHP中文网,作者V,侵删。

css实现圆环效果有多种方法,这里为大家分享五种方法:
(推荐教程:CSS教程)
首先我们来看一下实现效果:

接下来为大家介绍方法:
1、两个标签的嵌套
1 2 3 | < div class = "element1" >
< div class = "child1" ></ div >
</ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .element 1 {
width : 200px ;
height : 200px ;
background-color : lightpink;
border-radius: 50% ;
}
.child 1 {
width : 100px ;
height : 100px ;
border-radius: 50% ;
background-color : #009966 ;
position : relative ;
top : 50px ;
left : 50px ;
}
|
2、使用伪元素,before/after
1 | < div class = "element2" ></ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .element 2 {
width : 200px ;
height : 200px ;
background-color : lightpink;
border-radius: 50% ;
}
.element 2: after{
content : "" ;
display : block ;
width : 100px ;
height : 100px ;
border-radius: 50% ;
background-color : #009966 ;
position : relative ;
top : 50px ;
left : 50px ;
}
|
3、使用border:
1 | < div class = "element3" ></ div >
|
1 2 3 4 5 6 7 | .element 3 {
width : 100px ;
height : 100px ;
background-color : #009966 ;
border-radius: 50% ;
border : 50px solid lightpink ;
}
|
(学习视频推荐:css视频教程)
阅读剩余部分
相关阅读 >>
你可能不了解的css网格函数!
css float属性怎么用
css怎么实现禁止点击
css如何禁止复制
css图片怎么变圆
css如何实现图片堆叠效果
css超链接怎么使其失效
响应式css前端框架有哪些
css在html中三种实现方式是什么
:empty是什么?怎么使用?
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何利用css实现圆环效果