Bagaimana untuk Membuat Elemen Pekeliling Menggunakan HTML dan CSS?

Mencipta Elemen Pekeliling dengan HTML dan CSS

Melukis bulatan dalam HTML5 dan CSS3 memerlukan penyelesaian kerana teknologi ini tidak mempunyai sokongan asli untuk bentuk bulatan. Walau bagaimanapun, anda boleh mensimulasikan bulatan dengan mencipta segi empat tepat dengan bucu bulat.

Jejari Sempadan: Kunci kepada Sudut Bulat

Untuk mencipta sudut bulat, anda akan gunakan sifat CSS jejari sempadan. Dengan menetapkan nilainya kepada separuh lebar dan tinggi bulatan yang anda inginkan, anda boleh mencapai bentuk separuh bulatan.

Sebagai contoh, bulatan dengan diameter 50px memerlukan sempadan- jejari 25px:

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

Menambah Teks Di dalam

Untuk meletakkan teks dalam bulatan simulasi, sertakan teks dalam <div> elemen:

<div>

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