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>

Pendekatan Alternatif: Kotak- Saiz

Sebagai alternatif, kita boleh menggunakan sifat saiz kotak untuk memasukkan sempadan dan padding dalam pengiraan lebar dan tinggi kotak:

Kesimpulan

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

Dengan teknik CSS ini, anda kini boleh mencipta bentuk separuh bulatan elegan dengan mudah yang meningkatkan daya tarikan visual reka bentuk web anda.

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!