Bagaimana untuk Mencipta Separuh Bulatan dengan CSS Menggunakan Div Tunggal?

Membuat Setengah Bulatan dengan CSS

Soalan:

Bagaimanakah anda mencipta separuh bulatan menggunakan CSS sahaja, dengan elemen div tunggal dan tanpa bergantung pada alatan luaran seperti SVG atau API grafik?

Jawapan:

Mencapai kesan separuh bulatan dengan CSS boleh dicapai dengan memanfaatkan harta sempadan. Untuk melakukan ini:

1. Gunakan jejari sempadan-atas-kiri dan jejari sempadan-atas-kanan untuk membulatkan sudut kotak berdasarkan ketinggiannya dan sebarang sempadan tambahan. Contohnya:

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

2. Tambah jidar pada bahagian atas, kanan dan kiri kotak. Tetapkan sempadan bawah kepada sifar untuk mengalih keluar jidar bawah.

border: 10px solid gray;
border-bottom: 0;

Gabungan sudut bulat dan jidar ini menghasilkan bentuk separuh bulatan.

Contoh:

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

Kaedah Alternatif:

Pendekatan alternatif ialah menggunakan saiz kotak: kotak sempadan, yang mengira lebar dan tinggi kotak termasuk sempadan dan padding. Dengan cara ini, anda boleh menentukan ketinggian tepat separuh daripada lebar:

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

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

Kedua-dua kaedah boleh mencapai kesan separuh bulatan yang diingini menggunakan teknik CSS semata-mata.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Separuh Bulatan dengan CSS Menggunakan Div Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!