Bagaimana Saya Boleh Membuat Bulatan Menggunakan HTML dan CSS?

Melukis Kalangan pada Halaman HTML

Membuat elemen bulat menggunakan HTML5 dan CSS3 tidak boleh dilakukan secara langsung. Walau bagaimanapun, teknik boleh digunakan untuk mencipta elemen yang secara visual menyerupai bulatan.

Mencipta Segiempat Bulat

Kunci untuk mensimulasikan bulatan ialah mencipta segi empat tepat dengan sudut bulat. Sifat jejari sempadan dalam CSS membolehkan kami mentakrifkan kelengkungan sudut.

Menentukan Jejari

Untuk mencapai bulatan sempurna, nilai jejari sempadan harus sama dengan separuh lebar atau tinggi segi empat tepat itu. Ini memastikan bahawa bucu melengkung ke dalam secukupnya untuk mencipta kesan bulatan.

Contoh Kod

Pertimbangkan coretan kod berikut yang mencipta elemen bulat:

<div>

#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

Dalam contoh ini, kami mencipta segi empat tepat dengan lebar dan tinggi daripada 50 piksel. Nilai jejari sempadan ditetapkan kepada 25 piksel, iaitu separuh lebar/tinggi segi empat tepat. Ini menghasilkan bentuk seperti bulatan dengan isi merah.

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