Bagaimana untuk Menambah Sempadan Berganda dengan Warna Berbeza?
Untuk menambah sempadan berganda pada sebarang bentuk menggunakan CSS, “ :sebelum ini ” pemilih terkenal. Ia menukar warna kedua-dua sempadan untuk menjadikannya unik. Prosedur langkah demi langkah yang disediakan di bawah untuk menambah sempadan berganda dengan warna yang berbeza:
Langkah 1: Tambah Elemen Div dan Berikan Kelas
Dalam fail HTML, tambahkan elemen div di dalam teg
dan tetapkan “ kelas ” dengan nama “ dua sempadan ”. Pengguna boleh mencipta nama kelas mereka sendiri juga:< div kelas = 'dua sempadan' >
< / div >
Langkah 2: Buat Tag Gaya
Dalam langkah ini, buat bahagian untuk kelas ' dua sempadan ” dan jadikan ia satu salinan dengan “ :sebelum ini ” pemilih. Dengan cara ini, sifat CSS akan digunakan pada kelas kami:
< gaya >
.double- sempadan {
}
.double- sempadan :sebelum ini {
}
< / gaya >
Langkah 3: Tambahkan Gaya pada Kelas
Sifat CSS digunakan pada elemen div yang mempunyai kelas ' dua sempadan ”. Gaya berikut disebut di bawah:
.double- sempadan {
latar belakang- warna : #ccc;
sempadan : 4px hijau pepejal;
padding: 50px;
lebar : 16px;
ketinggian : 16px;
kedudukan: relatif;
margin: 0 auto;
}
Perihalan sifat CSS diberikan di bawah:
- Pertama, tambah ' warna latar belakang 'yang kelabu dan' sempadan ” dengan berat 4px dan warna hijau.
- ' padding ” daripada 50px untuk mencipta ruang dalaman 50px dari semua sisi.
- Pada akhirnya, ' lebar ” dan “ ketinggian” daripada 16px. Juga, ' margin ” ialah 0 auto yang bermaksud margin atas dan bawah akan menjadi sifar dan kiri.
Halaman web kelihatan seperti ini:
Output memaparkan bahawa sempadan digunakan pada 'div'.
Langkah 4: Penambahan Pemilih CSS
Sekarang, bergerak ke arah kotak kedua dalam teg gaya yang mempunyai ' :sebelum ini ” pemilih dilampirkan, dan tulis kod di bawah:
.double- sempadan :sebelum ini {latar belakang : tiada;
sempadan : 4px biru pepejal;
kandungan : '' ;
jawatan: mutlak;
atas: 4px;
kiri: 4px;
kanan: 4px;
bawah: 4px;
}
Sifat-sifat tersebut dijelaskan di bawah:
- Menggunakan ' kedudukan ” harta untuk menjadikan kedudukan sesuatu unsur tetap.
- Selepas itu, ' atas, kiri, kanan, dan bawah ” mentakrifkan jidar item yang baru dibuat daripada yang asal.
- Pemilih CSS dipanggil ': sebelum ini ” menambah kandungan di hadapan elemen yang dipilih.
Output kelihatan seperti:
Begitulah cara sempadan berganda boleh ditambah menggunakan warna yang berbeza.
Kesimpulan
Untuk menambah sempadan berganda, buat elemen div dahulu dan tetapkan ia kepada kelas. Kemudian, tambahkan CSS ' kedudukan ” harta yang mesti ditetapkan kepada relatif. Selepas itu, tambahkan Pemilih CSS ':sebelum' padanya supaya pengguna boleh menambah kandungan sebelum elemen yang dipilih. Panduan ini telah menunjukkan penggunaan sempadan dua dengan pelbagai warna.