如何使用纯CSS画一个圆环
这篇文章主要介绍如何使用纯CSS画一个圆环，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元银川做网站,已为上家服务,为银川各地企业和个人服务,联系电话:18980820575
画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。
难度系数
☆☆
HTML
解析：
CSS
.container {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.ring-style {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
width: 260px;
height: 260px;
border-radius: 260px;
}
.ring-style::before {
content: ' ';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 200px;
height: 200px;
border-radius: 200px;
}解析：
【 】
效果图
知识点
border-radius
::before && ::after
元素水平、竖直居中
以上是“如何使用纯CSS画一个圆环”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
分享名称：如何使用纯CSS画一个圆环
当前路径：
http://kswsj.cn/article/psjess.html
