Bagaimana Saya Boleh Mencipta Nombor Pekeliling Menggunakan CSS?

Menggunakan CSS untuk Mencipta Nombor Pekeliling

Ingin mencapai kesan yang menarik secara visual daripada membungkus nombor dalam kalangan? Ini boleh dilakukan dengan mudah menggunakan CSS. Mari kita terokai caranya:

Pertama, adalah penting untuk menetapkan warna latar belakang untuk bulatan. Gunakan sifat 'latar belakang' dengan nilai '#fff' seperti yang dilihat dalam coretan kod yang disediakan dalam jawapan:

background: #fff;

Seterusnya, tiba masanya untuk menentukan bentuk bulat dengan menggunakan 'jejari sempadan ' harta dengan nilai '50%'. Ini menjadikan elemen bulat sempurna:

border-radius: 50%;

Untuk mengawal saiz bulatan, anda boleh melaraskan sifat 'lebar' dan 'tinggi'. Sebagai contoh, nilai berikut menghasilkan bulatan 36x36 piksel:

width: 36px;
height: 36px;

Untuk membuat sempadan di sekeliling bulatan, tetapkan sifat 'sempadan' dengan garis pepejal 2 piksel. Laraskan warna menggunakan sifat 'border-color', seperti yang ditunjukkan dalam coretan:

border: 2px solid #666;

Akhir sekali, tengahkan nombor dalam bulatan menggunakan 'text-align: center' dan gayakan teks menggunakan ' sifat warna' dan 'font'. Anda boleh menyesuaikan ini supaya sepadan dengan pilihan reka bentuk anda.

Berikut ialah contoh kod HTML untuk memasukkan nombor yang digayakan ke dalam halaman web anda:

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

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Nombor Pekeliling Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!