43、css实现镂空半圆环 

        <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>

效果图：

posted @ 2019-09-12 14:37  要什么自行车y  阅读(2311)  评论(0)  编辑  收藏  举报