五环的编写

最新推荐文章于 2021-06-10 03:31:26 发布

old_man31

最新推荐文章于 2021-06-10 03:31:26 发布

阅读量402

点赞数

分类专栏： django

本文链接：https://blog.csdn.net/old_man31/article/details/86665381

版权

django 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

  <div class="plat">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>
       


 *{
        margin-left: 0;
        margin-top: 0;
    }
    
    .circle1,
    .circle2,
    .circle3,
    .circle4,
    .circle5{
        width: 200px;
        height: 200px;
        border:10px solid red;
        /*border,需要多个元素，尺寸，solid，和颜色200px是内园，外圆加20px*/
        border-radius: 50%;
    
    }
    
    .plat{
        position: absolute;
        left:50%;
        top: 50%;
        width: 680px;
        height: 380px;
        margin-top: -190px;
        margin-left: -340px;
        border: 1px solid black;
    }
    
    .circle1{
        border-color: black;
        position: absolute;
        left: 230px;
    }
    
    .circle2{
        border-color: yellow;
        position: absolute;
        left: 460px;
        z-index: 1;
    }
    .circle3{
        border-color: #2b669a;
        position: absolute;
        left: 345px;
        top: 160px;
        z-index: 2;
    }
    .circle4{
        border-color: red;
    }
    .circle5{
        border-color: #a94442;
        position: absolute;
        left: 115px;
        top: 160px;
    }