Bagaimana untuk Membuat Div Pekeliling dalam CSS dengan Mudah?

Penciptaan Div Pekeliling Ringkas dalam CSS

Kaedah konvensional untuk mencipta div bulat selalunya melibatkan penjanaan imej dengan saiz yang berbeza, yang boleh memakan masa dan tidak cekap. Walau bagaimanapun, CSS menawarkan penyelesaian yang lebih mudah.

Untuk mencipta div bulat menggunakan CSS, hanya gunakan langkah berikut:

• CSS:

Tentukan kelas asas untuk semua div bulat dengan bulat sempadan:

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

• HTML:

Buat elemen HTML menggunakan kelas asas dan nyatakan dimensi dan gaya yang diingini dalam tersuai kelas:

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

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

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

Contoh:

Pertimbangkan kod sampel berikut dan outputnya:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

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

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

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

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

Output:

Nota: Internet Explorer 8 dan ke bawah memerlukan CSS3 PIE agar teknik ini berfungsi dengan betul.

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