Border-image-repeat xususiyati

border-image-repeat xususiyati chegaraning ichki qismining rasm shaklida qanday takrorlanishini belgilaydi. Batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

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

Qiymatlar

Parametrlar soni	Tavsif
`stretch`	Chegaraning rasmini element o'lchamigacha cho'zadi. Bu standart qiymat hisoblanadi.
`repeat`	Chegaraning rasmini takrorlaydi.
`round`	Rasmni takrorlaydi va elementning bir tomonida butun sonli tasvirlar paydo bo'lishi uchun masshtablaydi.

Standart qiymat: stretch.

Parametrlar soni

1 yoki 2 parametrni qabul qilishi mumkin. Agar ikkita parametr berilsa, birinchisi yuqori va pastki chegaralar uchun, ikkinchisi esa chap va o'ng chegaralar uchun ishlatiladi.

Misol . Stretch qiymati

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

Misol . Repeat qiymati

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

Misol . Round qiymati

Hozir normal holatda repeat qiymati o'rnatilgan, hover holatida esa - round. E'tibor bering, hover dan oldin chegaraga butun bo'lmagan miqdordagi romb joylashgan, hover dan keyin esa - butun. Bu round ning ishlash usuli:

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

Misol . Ikkita so'z

Eni uchun repeat qiymati va balandligi uchun stretch qiymati:

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

Shuningdek qarang

border-image xususiyati,
bu chegaraning rasm shakli uchun qisqartma hisoblanadi
border-image-source xususiyati,
bu chegaraning rasm manbasini belgilaydi
border-image-slice xususiyati,
bu chegaraning rasm bo'laklarini belgilaydi
border-image-width xususiyati,
bu chegaraning rasm o'lchamini belgilaydi
border-image-outset xususiyati,
bu chegaraning rasm siljishini belgilaydi