43、css实现镂空半圆环

最新推荐文章于 2023-06-20 13:58:41 发布

weixin_30606461

最新推荐文章于 2023-06-20 13:58:41 发布

阅读量1.2k

点赞数

原文链接：http://www.cnblogs.com/xlfdqf/p/11511808.html

版权

        <style>
            .circle {
                position: relative;
                box-sizing: border-box;
            }
            
            .big {
                width: 140px;
                height: 140px;
                border-radius: 50%;
                position: absolute;
                margin: auto;
                /*以下五个属性为水平垂直居中的方法*/
                left: 0;
                top: 200px;
                right: 0;
                bottom: 0;
                box-sizing: border-box;
            }
            
            .small {
                width: 136px;
                height: 136px;
                border: 10px solid #9DDBE8;
                border-radius: 50%;
                position: absolute;
                margin: auto;
                /*以下五个属性为水平垂直居中的方法*/
                left: 0;
                top: 200px;
                right: 0;
                bottom: 0;
                box-sizing: border-box;
                border-bottom-color: transparent;
            }
        </style>
    </head>

    <body>
        <div class="circle">
            <div class="big"></div>
            <div class="small"></div>
        </div>
    </body>