CSS 画圆环

最新推荐文章于 2025-03-31 08:58:40 发布

原创最新推荐文章于 2025-03-31 08:58:40 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 技巧 #扇形

web前端专栏收录该内容

40 篇文章

订阅专栏

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

难度系数

☆☆

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

解析：