43、css實現鏤空半圓環

本文轉載自查看原文 2019-09-12 14:37 832 工作遇到的問題

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

效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 實現半圓環的兩種方式 3種純CSS實現中間鏤空的12色彩虹漸變圓環方法純css實現一個半圓 css實現半圓和圓 canvas實現半圓環形進度條用CSS3實現鏤空的簡單動畫效果 css3 圓形、圓環、半圓、四分之一圓、扇形純css實現卡券式半圓及陰影（整理） css3實現半圓和圓效果實現CSS圓環的5種方法(小結)