码迷,mamicode.com
首页 > Web开发 > 详细

CSS之居中五环

时间:2019-05-03 09:56:34      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:osi   radius   div   border   col   class   bsp   css   top   

<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之居中五环

标签:osi   radius   div   border   col   class   bsp   css   top   

原文地址:https://www.cnblogs.com/combating/p/10804196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!