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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Keseluruhan Skrin dalam CSS? Artikel seterusnya：Bagaimanakah saya boleh membuat lungsur turun bertingkat dalam Bootstrap 4?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2239

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2379

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1989

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1877

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1947

Topik-topik yang berkaitan

Lagi>

• Apakah yang dimaksudkan dengan penghalaan java?
• Apa yang perlu dilakukan jika tiada bunyi dari mikrofon komputer
• Apakah perbezaan antara php dan java
• Apakah maksud pelayan root?
• js rentetan kepada tatasusunan
• Bagaimana untuk membeli, menjual dan berdagang Bitcoin
• Bolehkah percikan api Douyin dinyalakan semula jika ia telah dimatikan selama lebih daripada tiga hari?
• Apakah perbezaan antara USB-C dan TYPE-C