画圆环思想很简单:首先画两个圆,设置不同的背景色;然后让两个圆的圆心重合即可。
难度系数
☆☆
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; }
解析:
- 设置元素的宽高、圆角效果,即可画出一个圆
- 通过 ::before 伪元素和本体元素,创建两个圆
- 通过基于父容器的绝对定位,设置 top、left、translate 属性,让元素基于父容器水平、竖直居中,即可让两个圆的圆心重合
【推荐教程:CSS视频教程 】
效果图
知识点
- border-radius
- ::before && ::after
- 元素水平、竖直居中
更多编程相关知识,请访问:编程视频!!
原文地址:https://www.jb51.cc/css/1206200.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。