Properti CSS border-image-slice
Contoh
Tentukan cara mengiris gambar perbatasan:
#borderimg {
border-image-slice: 30%;
}
Definisi dan Penggunaan
Properti border-image-slice
menentukan cara mengiris gambar yang ditentukan oleh
border-image-source . Gambar selalu diiris menjadi sembilan bagian: empat sudut, empat tepi dan tengah.
Bagian "tengah" diperlakukan sebagai sepenuhnya transparan, kecuali jika kata kunci isian disetel.
Tip: Lihat juga properti border-image (properti singkatan untuk mengatur semua properti border-image-*).
Nilai bawaan: | 100% |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.borderImageSlice="30%" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Sintaks CSS
border-image-slice: number|%|fill|initial|inherit;
Catatan: Properti border-image-slice
dapat mengambil dari satu hingga empat nilai. Jika nilai keempat dihilangkan, itu sama dengan yang kedua. Jika yang ketiga juga dihilangkan, itu sama dengan yang pertama. Jika yang kedua juga dihilangkan, itu sama dengan yang pertama.
Nilai properti
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Halaman Terkait
Tutorial CSS: Gambar Perbatasan CSS
Referensi CSS: properti gambar batas
Referensi CSS: properti border-image-outset
Referensi CSS: properti border-image-repeat
Referensi CSS: properti border-image-source
Referensi CSS: properti border-image-width
Referensi DOM HTML: properti borderImageSlice