Ya, kami tahu: kami dapat mengatur lebar pembatas. Lebar pembatas dapat berupa 5px, 10px, 20px, atau nilai apa pun.
Namun, pernahkah Anda membayangkan bahwa Anda dapat mengatur warna terpisah untuk setiap batas 1 piksel? Apa konsep ini? Artinya, jika Anda menetapkan batas 10 piksel untuk sebuah elemen, maka Anda dapat menetapkan 10 warna untuk area batas 10 piksel tersebut. Setiap 1px adalah layer (grup). DEMO: Penjelasan mendetail tentang beberapa set warna batas dalam warna batas css3
Baiklah, mari kita ulas cara mengatur ukuran border untuk elemen (blok kode 1):
Kode di atas menunjukkan bahwa kita telah mendefinisikan batas 6px untuk elemen div dengan tes className. Tentu saja, ini adalah persegi panjang dengan 4 sisi.
Oleh karena itu, kode CSS ini sebenarnya dapat disempurnakan menjadi (blok kode 2):
Melalui kode yang disempurnakan, kami menemukan bahwa kami sebenarnya dapat mengatur warna untuk keempat sisi persegi panjang. Adapun apakah warna harus diatur sama atau berbeda, itu tergantung pada kebutuhan Anda sendiri.
Saat Anda menjalankan kode yang disempurnakan (tentu saja Anda dapat mengubah warna setiap sisinya), Anda akan melihat sebuah persegi panjang dengan batas hitam 6px. Nah, ini yang kami harapkan.
Namun sekarang, kita dapat membagi border 6px menjadi 6 grup, masing-masing 1px adalah satu grup, sehingga setiap border dapat diatur hingga 6 warna berbeda.
Bagaimana cara melakukannya? Coba lihat (kode blok tiga):
.tes{
lebar batas:6 piksel;
gaya perbatasan: padat;
warna-batas-atas:#000 #fff #999 #aaa #ccc #eee;
warna-batas-kanan:#000 #fff #999 #aaa #ccc #eee;
warna-batas-batas:#000 #fff #999 #aaa #ccc #eee;
batas-kiri-warna:#000 #fff #999 #aaa #ccc #eee;
}
.tes{
lebar batas:6 piksel;
gaya perbatasan: padat;
warna-batas-atas:#000;
batas-kanan-warna:#000;
warna-batas-batas:#000;
batas-kiri-warna:#000;
}
.tes{
batas:6 piksel padat #000;
}
<div class="test">Uji pengaturan warna batas</div>