Sifat border-image-repeat

Sifat border-image-repeat menetapkan cara pengulangan bahagian dalam sempadan dalam bentuk gambar. Untuk maklumat yang lebih terperinci rujuk sifat border-image.

Sintaks

selector {
	border-image-repeat: stretch | repeat | round;
}

Nilai

Nilai	Keterangan
`stretch`	Meregangkan gambar sempadan mengikut saiz elemen. Nilai ini digunakan secara lalai.
`repeat`	Mengulang gambar sempadan.
`round`	Mengulang gambar dan menskalakannya supaya pada sisi elemen terdapat sejumlah integer gambar.

Nilai lalai: stretch.

Bilangan Parameter

Boleh menerima 1 atau 2 parameter. Jika dua parameter diberikan, maka yang pertama adalah untuk sempadan atas dan bawah, dan parameter kedua - untuk kiri dan kanan.

Contoh . Nilai stretch

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

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

Contoh . Nilai repeat

<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;
}

Contoh . Nilai round

Sekarang dalam keadaan normal ditetapkan nilai repeat, dan ketika hover - round. Perhatikan bahawa sebelum hover ke dalam sempadan dimasukkan bukan integer bilangan rombus, dan selepas hover - integer. Begitulah cara round berfungsi:

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

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

Contoh . Dua perkataan

Nilai repeat untuk lebar dan stretch untuk tinggi:

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

#elem {
	border-image-repeat: repeat stretch;
	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;
}

Lihat juga

sifat border-image,
yang merupakan singkatan untuk sempadan-gambar
sifat border-image-source,
yang menetapkan laluan ke gambar untuk sempadan
sifat border-image-slice,
yang merupakan pemotongan gambar untuk sempadan
sifat border-image-width,
yang menetapkan saiz gambar untuk sempadan
sifat border-image-outset,
yang menetapkan anjakan gambar untuk sempadan