本文摘自PHP中文网，作者青灯夜游，侵删。
本篇文章通过代码示例介绍一下使用纯CSS画圆环的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。
难度系数
☆☆
HTML
1 2 3 | <div class="container">
<span class="ring-style"></span>
</div>
|
解析：
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .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;
}
|
解析：
- 设置元素的宽高、圆角效果，即可画出一个圆
- 通过 ::before 伪元素和本体元素，创建两个圆
- 通过基于父容器的绝对定位，设置 top、left、translate 属性，让元素基于父容器水平、竖直居中，即可让两个圆的圆心重合
【推荐教程：CSS视频教程 】
效果图
知识点
- border-radius
- ::before && ::after
- 元素水平、竖直居中
更多编程相关知识，请访问：编程视频！！
以上就是使用纯CSS画一个圆环（代码示例）的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
css background-blend-mode属性怎么用？
css文本行高怎么设置
css文本域怎么写
如何优化css expression性能
css中内联元素可继承的属性有哪些？
css斜体样式怎么写
css modules是啥子东西？一起来了解一下！
纯css如何绘制双箭头（代码示例）
css3+javascript怎么做一个旋转的3d盒子？
如何使用css来控制页面
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 使用纯CSS画一个圆环（代码示例）
