Bagaimana Saya Boleh Membuat Latar Belakang Nombor Pekeliling Menggunakan CSS?

Nombor Sekitar dengan Latar Belakang Bulatan Menggunakan CSS

Meningkatkan daya tarikan visual nombor dengan melampirkannya dalam latar belakang bulat boleh dicapai dengan mudah dengan kuasa CSS. Ikuti langkah ini untuk mencapai ini:

Dalam fail CSS anda, buat kelas dengan sifat berikut:

.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;
}

Dalam fail HTML anda, bungkus nombor dalam

elemen dan gunakan kelas .numberCircle.

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

Ini akan mengelilingi nombor dengan latar belakang bulat, seperti yang ditunjukkan dalam imej yang disediakan. Laraskan sifat CSS mengikut keperluan untuk menyesuaikan rupa bulatan dan nombor di dalamnya.

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

css html using class number this background

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