同心圆的实现

涉及知识：
1.z-index 和 opacity混用
2.垂直居中
3.border-radius

代码：
html:
<div class="panel-card>
<div class="big"></div>
<div class="middle"></div>
<div class="small"></div>
</div>
css:
.panel-card{
float: left;
width: 50%;
height: 100%;
position: relative;
}
.panel-card .big{
display: inline-block;
width: 100px;
height: 100px;
opacity: 0.1;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
background: #00B39E;
border-radius: 50px;
}
.panel-card .middle{
display: inline-block;;
width: 50px;
height: 50px;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
background: #00B39E;
border-radius: 25px;
}
.panel-card .small {
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
border-radius: 10px;
background-color: #ffffff;
}

实现效果：

image.png