Bagaimana untuk Mencipta Separuh Bulatan Sempurna dalam CSS Menggunakan Div Tunggal?

Mencipta Separuh Bulatan dengan CSS

Mencipta bentuk bulat dalam CSS boleh menimbulkan cabaran. Jika anda sedang mencari penyelesaian yang elegan untuk menjana bentuk separuh bulatan sempurna menggunakan hanya satu div dan definisi CSS, inilah yang anda perlu ketahui:

Campuran Sempurna: Jejari Sempadan dan Sempadan

Untuk mencapai kesan separuh bulatan yang diingini, kami memanfaatkan sifat jidar-atas-kiri-jejari dan sempadan-atas-kanan-jejari. Sifat ini mengelilingi penjuru kotak sasaran kami berdasarkan ketinggiannya dan sempadan tambahan.

Pelaksanaan CSS

Pertimbangkan kod CSS berikut:

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

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

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

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