CSS之居中五环
Posted combating
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS之居中五环相关的知识，希望对你有一定的参考价值。
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
*{
padding: 0;
margin: 0;
}
.plat{
position: absolute;
border:12px solid red;
top: 50%;
left: 50%;
margin-left:-190px;
margin-top:-93px;
height: 186px;
width: 380px;
}
.circle1,.circle2,.circle3,.circle4,.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}
.circle1{
left: 0;
top: 0;
border-color:green;
}
.circle2{
left:130px;
top: 0;
border-color: red;
}
.circle3{
left:260px;
top: 0;
border-color: aquamarine;
}
.circle4{
left: 65px;
top: 70px;
border-color: bisque;
}
.circle5{
left: 195px;
top:70px;
}
以上是关于CSS之居中五环的主要内容，如果未能解决你的问题，请参考以下文章