Contoh
Tentukan bagaimana mengiris gambar border:
#borderimg {
border-image-slice: 30;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti border-image-slice menentukan bagaimana mengiris gambar yang ditentukan oleh perbatasan-image-sumber . gambar selalu diiris menjadi sembilan bagian: empat penjuru, empat tepi dan tengah.
The "middle" bagian diperlakukan sebagai sepenuhnya transparan, kecuali kata kunci mengisi diatur.
Tip: Juga melihat perbatasan-gambar properti (a shorthand property for setting all the border-image-* properties) .
nilai default: | 100% |
---|---|
mewarisi: | no |
animatable: | no. Read about animatable |
Versi: | CSS3 |
sintaks JavaScript: | object .style.borderImageSlice="30%" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Milik | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS Syntax
border-image-slice:number|%|fill|initial|inherit;
Note: Properti border-image-slice dapat mengambil dari satu sampai empat nilai. Jika nilai keempat dihilangkan, itu adalah sama dengan yang kedua. Jika yang ketiga juga dihilangkan, itu adalah sama seperti yang pertama. Jika yang kedua juga dihilangkan, itu adalah sama seperti yang pertama.
Nilai properti
Nilai | Deskripsi | Mainkan |
---|---|---|
number | The number(s) mewakili piksel untuk gambar raster atau koordinat untuk gambar vektor | Mainkan " |
% | Persentase yang relatif ke tinggi atau lebar gambar | Mainkan " |
fill | Penyebab bagian tengah gambar yang akan ditampilkan | Mainkan " |
initial | Set properti ini ke nilai default. Baca tentang awal | |
inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS3 tutorial: Gambar CSS3 Border
CSS Referensi: border-image property
CSS Referensi: border-image-outset property
CSS Referensi: border-image-repeat property
CSS Referensi: border-image-source property
CSS Referensi: border-image-width property
Referensi HTML DOM: borderImageSlice property