画圆环思想很简单:首先画两个圆,设置不同的背景色;然后让两个圆的圆心重合即可。
难度系数
☆☆
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: 20