Bagaimanakah Saya Boleh Mencipta dan Menggayakan Bulatan Menggunakan HTML5 dan CSS3?

Melukis Kalangan dalam HTML5 dan CSS3

Walaupun HTML5 dan CSS3 tidak mempunyai sokongan asli untuk melukis bulatan secara langsung, adalah mungkin untuk meniru penampilan bulatan menggunakan teknik inovatif.

Mencipta Bulatan dengan Bulat Sudut

Untuk mensimulasikan bulatan, anda boleh mencipta elemen segi empat tepat dan menggunakan bucu bulat padanya. Jejari sudut bulat hendaklah separuh daripada lebar atau tinggi bulatan yang diingini yang anda mahu buat.

Sebagai contoh, kod berikut mencipta bulatan merah dengan diameter 50 piksel:

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

<div>

Menambah Teks Di Dalam Bulatan

Untuk menambah teks di dalam bulatan, letakkan elemen teks secara mutlak dalam bekas bulatan dan selaraskan di tengah secara menegak dan mendatar.

#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div>

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