使用纯CSS画一个圆环（代码示例）-css教程-PHP中文网

使用纯CSS画一个圆环（代码示例）

青灯夜游

发布： 2021-03-25 10:46:22

转载

4528人浏览过

本篇文章通过代码示例介绍一下使用纯css画圆环的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

使用纯CSS画一个圆环（代码示例）

画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。

难度系数

☆☆

立即学习“前端免费学习笔记（深入）”；

HTML

<div class="container">
    <span class="ring-style"></span>
</div>

登录后复制

解析：

此处有父容器

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;
}

登录后复制

解析：