Sifat border-image-slice

Sifat border-image-slice memberitahu pelayar, bahagian mana imej yang akan digunakan untuk sudut, dan mana yang akan digunakan untuk sisi (dan bahagian mana yang akan menjadi pusat). 4 bahagian digunakan untuk sudut, 4 bahagian digunakan untuk sisi dan satu bahagian (tengah) digunakan untuk latar belakang elemen (secara pilihan, kata kunci fill).

Untuk maklumat yang lebih terperinci, lihat sifat border-image.

Sintaks

<+css+> selector { border-image-slice: dari 1 hingga 4 nombor | dari 1 hingga 4 peratusan; } <-css->

Dengan nombor dan peratusan melalui ruang boleh berdiri kata kunci fill.

Nilai

Nilai	Keterangan
peratusan	Peratusan dikira relatif kepada saiz imej. Mendatar relatif kepada lebar, menegak — relatif kepada ketinggian.
nombor	Nombor ialah piksel (untuk imej raster) atau koordinat (untuk imej vektor). Unit pengukuran tidak dinyatakan.
`fill`	Tingkah laku lalai mengandaikan bahawa bahagian tengah imej akan dibuang. Untuk menggunakannya, perlu menggunakan kata kunci `fill` sebagai tambahan kepada nombor atau peratusan.

Bilangan Parameter

Ofset boleh menerima 1, 2, 3 atau 4 parameter. Sila ambil perhatian bahawa unit pengukuran untuk ofset tidak ditulis (contohnya, hanya 20, bukan 20px). Ketebalan juga boleh ditetapkan dalam %.

Bilangan Parameter	Keterangan
`1`	Ketebalan untuk semua sisi secara serentak.
`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 lalai: 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

sifat border-image,
yang merupakan singkatan untuk sempadan-imej
sifat border-image-source,
yang menetapkan laluan imej untuk sempadan
sifat border-image-repeat,
yang pengulangan imej untuk sempadan
sifat border-image-width,
yang menetapkan saiz imej untuk sempadan
sifat border-image-outset,
yang menetapkan anjakan imej untuk sempadan