Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Paparan Nombor Pekeliling dengan CSS?

Bagaimana untuk Membuat Paparan Nombor Pekeliling dengan CSS?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-06 07:32:11517semak imbas

How to Create Circular Number Displays with CSS?

Cara Menggayakan Nilai Berangka dengan Jejari Sempadan

Menggabungkan sempadan bulat di sekeliling nilai berangka meningkatkan daya tarikan visual dan kebolehbacaan. Untuk mencapai kesan ini menggunakan CSS, laksanakan langkah berikut:

Penyelesaian:

  1. Tentukan Kelas CSS: Cipta kelas CSS dinamakan "numberCircle" untuk merangkum penggayaan.
  2. Tetapkan Sempadan Jejari: Gunakan jejari sempadan 50% untuk memberikan elemen bentuk bulat.
  3. Laraskan Dimensi: Tentukan lebar dan tinggi untuk mengawal saiz bulatan.
  4. Tambah Padding: Gunakan padding untuk mencipta ruang di sekeliling nombor.
  5. Konfigurasikan Latar Belakang dan Sempadan: Pilih latar belakang dan warna jidar untuk dipadankan dengan estetik yang diingini.
  6. Teks Tengah: Gunakan penjajaran teks: tengah untuk meletakkan nombor dalam bulatan.
  7. Pilih Fon: Nyatakan keluarga dan saiz fon untuk sepadan dengan penampilan yang diingini.

Contoh Kod:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

Penggunaan HTML:

<div class="numberCircle">30</div>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Paparan Nombor Pekeliling dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn