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:
-
Tentukan Kelas CSS: Cipta kelas CSS dinamakan "numberCircle" untuk merangkum penggayaan.
-
Tetapkan Sempadan Jejari: Gunakan jejari sempadan 50% untuk memberikan elemen bentuk bulat.
-
Laraskan Dimensi: Tentukan lebar dan tinggi untuk mengawal saiz bulatan.
-
Tambah Padding: Gunakan padding untuk mencipta ruang di sekeliling nombor.
-
Konfigurasikan Latar Belakang dan Sempadan: Pilih latar belakang dan warna jidar untuk dipadankan dengan estetik yang diingini.
-
Teks Tengah: Gunakan penjajaran teks: tengah untuk meletakkan nombor dalam bulatan.
-
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