Properti border-image-slice

Properti border-image-slice memberi tahu browser bagian mana dari gambar yang akan digunakan untuk sudut-sudut, dan mana yang untuk sisi-sisi (dan bagian mana yang akan menjadi pusat). Untuk sudut-sudut digunakan 4 bagian, untuk sisi-sisi digunakan 4 bagian dan satu bagian (tengah) digunakan untuk latar belakang elemen (opsional, kata kunci fill).

Untuk informasi lebih detail lihat properti border-image.

Sintaksis

<+css+> selektor { border-image-slice: dari 1 hingga 4 angka | dari 1 hingga 4 persen; } <-css->

Dengan angka dan persen yang dipisahkan spasi bisa ditambahkan kata kunci fill.

Nilai

Nilai	Deskripsi
persen	Persen dihitung relatif terhadap ukuran gambar. Horizontal relatif terhadap lebar, vertikal — relatif terhadap tinggi.
angka	Angka adalah piksel (untuk gambar raster) atau koordinat (untuk gambar vektor). Satuan pengukuran tidak ditentukan.
`fill`	Perilaku default mengasumsikan bahwa bagian tengah gambar akan dibuang. Untuk menggunakannya, perlu menggunakan kata kunci `fill` sebagai tambahan terhadap angka atau persen.

Jumlah Parameter

Offset dapat menerima 1, 2, 3 atau 4 parameter. Perhatikan bahwa satuan pengukuran untuk offset tidak ditulis (misalnya, hanya 20, bukan 20px). Ketebalan juga dapat ditentukan dalam %.

Jumlah Parameter	Deskripsi
`1`	Ketebalan untuk semua sisi secara bersamaan.
`2`	1 2; - `1px` untuk atas dan bawah, `2px` untuk kiri dan kanan.
`3`	`1 2 3`; - `1px` untuk atas, `2px` untuk kiri dan kanan, `3px` untuk bawah.
`4`	`1 2 3 4`; - `1px` untuk atas, `2px` untuk kanan, `3px` untuk bawah, `4px` untuk kiri.

Nilai default: 100%(?).

Contoh

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Lihat juga

properti border-image,
yang merupakan singkatan untuk border gambar
properti border-image-source,
yang menetapkan path ke gambar untuk border
properti border-image-repeat,
yang mengatur pengulangan gambar untuk border
properti border-image-width,
yang mengatur ukuran gambar untuk border
properti border-image-outset,
yang mengatur pergeseran gambar untuk border