Bolehkah HTML5 dan CSS3 Benar-benar Melukis Kalangan?

Melukis Kalangan dengan HTML5 dan CSS3

Soalan ini meneroka kemungkinan melukis bulatan menggunakan HTML5 dan CSS3.

Boleh HTML5 dan CSS3 Buat Kalangan?

Walaupun anda tidak boleh melukis bulatan secara langsung menggunakan HTML5 dan CSS3, adalah mungkin untuk mencipta elemen yang hampir menyerupai bulatan. Ini boleh dicapai dengan mencipta elemen segi empat tepat dengan bucu bulat menggunakan sifat jejari sempadan.

Sampel Kod

Coretan kod berikut menunjukkan cara membuat bulatan- seperti bentuk:

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

Dalam contoh ini, elemen #circle ialah div segi empat tepat dengan lebar dan ketinggian 50 piksel. Sifat jejari sempadan ditetapkan kepada separuh daripada lebar dan ketinggian yang dikehendaki (25 piksel), menghasilkan rupa seperti bulatan. Sifat latar belakang menetapkan warna isian kepada merah.

Pertimbangan Tambahan

• Kedudukan: Anda boleh menggunakan sifat kedudukan CSS (cth., kedudukan, atas, kiri) untuk meletakkan bulatan pada halaman anda.
• Teks dalam Kalangan: Anda tidak boleh meletakkan teks secara langsung di dalam bulatan yang dibuat menggunakan kaedah ini. Sebaliknya, anda boleh mencipta elemen teks yang berasingan dan meletakkannya dengan sewajarnya.