Sempadan CSS – Menggayakan Garis Besar Elemen Anda

Berikut ialah siaran seterusnya untuk siri CSS: Asas kepada Kecemerlangan anda:

---

Kuliah 9: Sempadan CSS – Menggayakan Garis Besar Elemen Anda

Dalam kuliah ini, kami akan meneroka cara menambah dan menyesuaikan sempadan sekitar elemen HTML menggunakan CSS. Sempadan boleh memberi kesan ketara kepada penampilan visual elemen anda dan menentukan bahagian halaman web anda.

1. Sifat Sempadan Asas

Sempadan CSS ditakrifkan menggunakan tiga sifat utama:

• lebar sempadan: Mentakrifkan ketebalan sempadan.
• gaya sempadan: Menentukan gaya (pepejal, putus-putus, bertitik, dsb.).
• warna sempadan: Menetapkan warna sempadan.

Contoh:

<div class="box">
    This is a bordered box!
</div>

.box {
    border-width: 2px;
    border-style: solid;
    border-color: #4CAF50; /* Green border */
}

Ini akan menghasilkan kotak dengan jidar hijau pepejal setebal 2 piksel.

2. Harta Shorthand untuk Sempadan

Anda juga boleh mentakrifkan semua sifat sempadan menggunakan satu sifat trengkas:

.box {
    border: 2px solid #4CAF50;
}

Sintaks trengkas ini menjadikan kod lebih bersih dan lebih mudah untuk diurus.

3. Gaya Sempadan Berbeza

CSS menawarkan pelbagai gaya untuk sempadan. Beberapa gaya biasa ialah:

• pejal
• berputus-putus
• bertitik
• berganda

Contoh:

.box-dashed {
    border: 3px dashed #f44336; /* Red dashed border */
}

Ini akan mencipta jidar merah putus-putus di sekeliling elemen.

4. Sempadan Bulat dengan jejari sempadan

Untuk menambah bucu bulat pada jidar, gunakan sifat jejari sempadan.

Contoh:

.rounded-box {
    border: 2px solid #2196F3; /* Blue solid border */
    border-radius: 10px; /* Rounded corners */
}

Ini akan membuat kotak dengan bucu bulat (jejari 10px) dan jidar biru.

5. Bahagian Sempadan Individu

CSS membolehkan anda menggayakan setiap sisi sempadan secara individu menggunakan sifat seperti atas sempadan, sempadan-kanan, sempadan-bawah dan sempadan-kiri.

Contoh:

.sided-box {
    border-top: 4px solid #FF5722; /* Orange top border */
    border-right: 2px dotted #3F51B5; /* Blue dotted right border */
}

Ini akan menghasilkan kotak dengan jidar atas pepejal jingga tebal dan jidar kanan bertitik biru.

6. Menggunakan Imej sebagai Sempadan

Dengan sifat imej sempadan, anda boleh menggunakan imej sebagai sempadan elemen.

Contoh:

.image-border {
    border: 10px solid transparent;
    border-image: url('border-image.png') 30 round;
}

Ini membolehkan anda menjadi kreatif dengan menambahkan imej tersuai pada sempadan anda.

Kesimpulan

Sempadan CSS boleh mengubah rupa dan rasa elemen secara mendadak pada halaman web anda. Eksperimen dengan gaya, warna, lebar dan jejari yang berbeza untuk mencapai reka bentuk yang anda inginkan.

---

ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Sempadan CSS – Menggayakan Garis Besar Elemen Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!