Bagaimanakah Saya Boleh Membuat Separuh Bulatan Menggunakan Sempadan dan Garis Besar CSS?

Mencipta Separuh Bulatan dengan CSS Menggunakan Sempadan dan Garis Besar

Dalam percubaan untuk membina separuh bulatan dalam satu elemen div menggunakan CSS , seseorang mungkin menghadapi pelbagai teknik. Artikel ini membentangkan penyelesaian yang diperhalusi menggunakan sifat jejari sempadan-atas-kiri-jejari dan sempadan-atas-kanan-jejari untuk melengkungkan bucu kotak.

Untuk mencapai kesan ini, cuma tambahkan jidar pada bahagian atas, sebelah kanan dan kiri kotak, sambil menghapuskan sempadan di bahagian bawah. Pendekatan ini berkesan mewujudkan separuh bulatan yang menarik dan elegan secara visual.

Sebagai contoh, pertimbangkan definisi CSS berikut:

.half-circle {
   width: 200px;
   height: 100px;
   background-color: gold;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border: 10px solid gray;
   border-bottom: 0;
}

Dengan menetapkan ketinggian kotak kepada separuh lebarnya, bersama-sama dengan nilai jejari sempadan yang sesuai dan jidar yang sesuai, anda boleh menghasilkan separuh bulatan yang lancar dengan mudah.

Pendekatan alternatif melibatkan penggunaan sifat bersaiz kotak untuk mengambil kira lebar dan ketinggian kotak, termasuk sempadan dan pelapik. Teknik ini menghapuskan keperluan untuk pengiraan tambahan dan memastikan ketekalan dalam hasil akhir.

.half-circle {
   width: 200px;
   height: 100px;
   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;
}

Pendekatan yang diubah suai ini memberikan fleksibiliti dalam penggayaan dan memastikan separuh bulatan yang diingini dipaparkan secara konsisten merentas pelayar yang berbeza. Dengan memanfaatkan kuasa sempadan dan jejari CSS, anda boleh mencipta elemen separuh bulatan yang menarik secara visual dan berkesan dalam reka bentuk web anda.

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