Bagaimana Cara Menambahkan Perbatasan Ganda dengan Warna Berbeda?
Untuk menambahkan batas ganda pada bentuk apa pun menggunakan CSS, tombol “ :sebelum ” pemilih terkenal. Itu mengubah warna kedua perbatasan untuk menjadikannya unik. Prosedur langkah demi langkah yang disediakan di bawah ini untuk menambahkan batas ganda dengan warna berbeda:
Langkah 1: Tambahkan Elemen Div dan Tetapkan Kelas
Dalam file HTML, tambahkan elemen div di dalam tag
dan beri tanda “ kelas ” dengan nama “ perbatasan ganda ”. Pengguna juga dapat membuat nama kelas mereka sendiri:< div kelas = 'perbatasan ganda' >
< / div >
Langkah 2: Buat Tag Gaya
Pada langkah ini, buat porsi untuk kelas “ perbatasan ganda ” dan buat satu salinan dengan “ :sebelum pemilih. Dengan cara ini, properti CSS akan diterapkan ke kelas kita:
< gaya >
.dobel- berbatasan {
}
.dobel- berbatasan :sebelum {
}
< / gaya >
Langkah 3: Tambahkan Gaya ke Kelas
Properti CSS berlaku untuk elemen div yang memiliki kelas “ perbatasan ganda ”. Gaya berikut disebutkan di bawah ini:
.dobel- berbatasan {
latar belakang- warna : #ccc;
berbatasan : 4px hijau pekat;
padding: 50px;
lebar : 16px;
tinggi : 16px;
posisi: relatif;
batas: 0 mobil;
}
Deskripsi properti CSS diberikan di bawah ini:
- Pertama, tambahkan “ warna latar belakang ” yang berwarna abu-abu dan “ berbatasan ” dengan berat 4px dan warna hijau.
- “ lapisan ” dari 50px untuk membuat ruang dalam 50px dari semua sisi.
- Pada akhirnya, “ lebar ' Dan ' tinggi' dari 16px. Juga ' batas ” adalah 0 otomatis yang berarti margin atas dan bawah akan menjadi nol dan kiri.
Halaman web terlihat seperti ini:
Output menampilkan bahwa perbatasan diterapkan ke 'div'.
Langkah 4: Penambahan Pemilih CSS
Sekarang, pindah ke kotak kedua di tag gaya yang bertuliskan “ :sebelum ” pemilih terpasang, dan tulis kode di bawah ini:
.dobel- berbatasan :sebelum {latar belakang : tidak ada;
berbatasan : 4px biru solid;
isi : '' ;
posisi: mutlak;
atas: 4px;
kiri: 4px;
kanan: 4px;
bawah: 4px;
}
Properti dijelaskan di bawah ini:
- Menggunakan ' posisi ” properti untuk membuat posisi elemen tetap.
- Setelah itu, “ atas, kiri, kanan, dan bawah ” mendefinisikan margin item yang baru dibuat dari yang asli.
- Pemilih CSS disebut “: sebelum ” menambahkan konten di depan elemen yang dipilih.
Outputnya terlihat seperti:
Begitulah cara perbatasan ganda dapat ditambahkan menggunakan warna yang berbeda.
Kesimpulan
Untuk menambahkan batas ganda, buat elemen div terlebih dahulu dan tetapkan ke kelas. Kemudian, tambahkan CSS ' posisi ” properti yang harus disetel ke relatif. Setelah itu, tambahkan CSS Selector “:before” sehingga pengguna dapat menambahkan konten sebelum elemen yang dipilih. Panduan ini telah mendemonstrasikan penggunaan batas ganda dengan berbagai warna.