Bagaimanakah Saya Boleh Mencipta Lencana Nombor Pekeliling Hanya Menggunakan CSS?

Memasukkan Nombor dalam Bulatan dengan CSS

Soalan:

Bolehkah CSS digunakan untuk menyertakan nombor dalam bulatan, seperti yang ditunjukkan dalam imej yang disediakan?

[Imej nombor yang dikelilingi oleh bulatan]

Jawapan:

Ya, adalah mungkin untuk mencapai kesan visual ini menggunakan CSS.

Pelaksanaan:

1. Takrifkan .numberCircle Kelas:

.numberCircle {
    border-radius: 50%;  /* Create a circular shape */
    width: 36px;  /* Set the width */
    height: 36px;  /* Set the height */
    padding: 8px;  /* Provide padding for the text */

    background: #fff;  /* Set a white background */
    border: 2px solid #666;  /* Add a gray border */
    color: #666;  /* Set the font color to gray */
    text-align: center;  /* Center the text horizontally */

    font: 32px Arial, sans-serif;  /* Define the font and size */
}

2. Gunakan .numberCircle Class:

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

Kelas CSS dan kod HTML ini akan menjana nombor tertutup bulatan, seperti yang dilihat dalam imej asal. Anda boleh menyesuaikan penampilan dengan melaraskan nilai seperti lebar, tinggi, warna dan fon.

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