Bagaimanakah Saya Boleh Mencipta Elemen Pekeliling dalam HTML5 dan CSS3?

Membuat Elemen Pekeliling dalam HTML5 dengan CSS3

Melukis bulatan terus dalam HTML5 menggunakan elemen standard tidak boleh dilakukan. Walau bagaimanapun, kita boleh membuat anggaran menggunakan teknik penggayaan CSS.

Pengiraan dengan Sudut Bulat

Satu kaedah ialah mencipta segi empat tepat dengan bucu bulat. Sifat jejari sempadan, apabila ditetapkan kepada separuh tinggi atau lebar bulatan yang dikehendaki, menghasilkan lengkung yang licin.

Kod HTML dan CSS:

<div>

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

Kod ini mencipta segi empat tepat merah dengan bucu bulat yang secara visual menghampiri bulatan 50 piksel dalam diameter.

Menambah Teks Di Dalam (Pilihan)

Untuk meletakkan teks di dalam bulatan anggaran, tambahkan kandungan pada elemen DIV dalam teg HTML.

<div>

Dengan menggunakan penggayaan CSS yang sesuai (cth., text-align: center;), anda boleh menyelaraskan teks dalam pekeliling elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Elemen Pekeliling dalam HTML5 dan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!