Bagaimana untuk Membuat Paparan Nombor Pekeliling dengan 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!