CSS3 Border Gambar
Dengan properti CSS3 border-image, Anda dapat gambar untuk digunakan sebagai perbatasan sekitar elemen.
Properti border-image memiliki tiga bagian:
- Gambar untuk digunakan sebagai perbatasan
- Dimana untuk mengiris gambar
- Tentukan apakah bagian tengah harus diulang atau diregangkan
Properti border-image mengambil gambar dan irisan menjadi sembilan bagian. Kemudian menempatkan sudut di sudut-sudut, dan bagian tengah yang berulang atau membentang seperti yang Anda tentukan.
Catatan: Untuk border-image untuk bekerja, elemen juga perlu set properti perbatasan!
Di sini, bagian tengah gambar diulang untuk membuat perbatasan:
Berikut adalah kode:
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
Di sini, bagian tengah gambar yang membentang untuk membuat perbatasan:
Berikut adalah kode:
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
Tip: Properti border-image sebenarnya adalah properti singkat untuk perbatasan-image-source, perbatasan-image-slice, border-image-width, border-image-outset dan sifat border-image-repeat. Namun, dalam tutorial ini kita hanya akan menggunakan properti singkatan border-image.
CSS3 border-image - Nilai Iris berbeda
Nilai slice yang berbeda benar-benar mengubah tampilan perbatasan:
Berikut adalah kode:
border-image: url(border.png) 50 round;
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
border-image: url(border.png) 20% round;
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
border-image: url(border.png) 30% round;
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
0 komentar:
Posting Komentar