平武建站

如何使用纯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;
}

解析：

  • 设置元素的宽高、圆角效果，即可画出一个圆

  • 通过 ::before 伪元素和本体元素，创建两个圆

  • 通过基于父容器的绝对定位，设置 top、left、translate 属性，让元素基于父容器水平、竖直居中，即可让两个圆的圆心重合

【 】

效果图

如何使用纯CSS画一个圆环

知识点

  • border-radius

  • ::before && ::after

  • 元素水平、竖直居中

以上是“如何使用纯CSS画一个圆环”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站标题：如何使用纯CSS画一个圆环
网站URL：http://pwwzsj.com/article/psjess.html

其他资讯