Bagaimana untuk Membuat Div Pekeliling dalam CSS Tanpa Menggunakan Imej?

Mencipta Div Pekeliling tanpa Menggunakan Imej

Ramai pembangun sering menggunakan imej untuk mencipta div bulat, tetapi ini boleh menjadi proses yang membosankan. Adakah terdapat kaedah yang lebih mudah menggunakan CSS?

Penyelesaian CSS

Ya, adalah mungkin untuk menggunakan CSS untuk mencipta div bulat. Kuncinya terletak pada sifat jejari sempadan. Berikut ialah contoh kod:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* for IE8 compatibility */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}

.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}

.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

Penggunaan HTML

Gunakan kelas circleBase sebagai asas untuk semua div bulat anda dan tambah kelas tambahan untuk menyesuaikan saiz dan penampilannya :

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>
<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Keserasian IE8

Untuk keserasian dengan IE8 dan penyemak imbas yang lebih lama, anda boleh menggunakan CSS3 PIE, fail tingkah laku yang meniru sudut bulat.

Kaedah ini membolehkan anda membuat div bulat dari sebarang saiz dan gaya menggunakan hanya CSS, menghapuskan keperluan untuk berbilang imej dan memberikan kefleksibelan yang lebih besar dalam proses reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Pekeliling dalam CSS Tanpa Menggunakan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!