Bagaimana Saya Boleh Membuat Separuh Bulatan Menggunakan CSS Sahaja?

Mencipta Setengah Bulatan Menggunakan CSS Sahaja

Masalah:

Bolehkah separuh bulatan bentuk dibuat menggunakan CSS, tanpa alatan atau grafik luaran, dipaparkan seperti yang digambarkan dalam imej rujukan?

Penyelesaian:

Menggunakan Jejari Sempadan dan Sempadan:

Untuk mencapai kesan ini, sifat CSS jejari sempadan-atas-kiri dan jejari sempadan-atas-kanan boleh dimanfaatkan untuk membundarkan sudut kotak berdasarkan ketinggian dan sempadan tambahan. Sempadan kemudian digunakan pada bahagian atas, kanan dan kiri kotak, melengkapkan bentuk separuh bulatan.

Kod CSS:

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* Half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px height + 10px border */
    border-top-right-radius: 110px; /* 100px height + 10px border */
    border: 10px solid gray;
    border-bottom: 0;
}</code>

Kaedah ini menghasilkan separuh bulatan dengan berkesan hanya menggunakan elemen div tunggal.

Pendekatan Alternatif Menggunakan saiz kotak: kotak sempadan:

Pilihan lain melibatkan sifat saiz kotak , yang boleh ditetapkan kepada kotak sempadan untuk memfaktorkan jidar semasa mengira lebar dan tinggi kotak.

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* Half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}</code>

Kedua-dua kaedah secara berkesan meniru bentuk separuh bulatan menggunakan CSS sahaja.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Separuh Bulatan Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!