Свойство border-image-repeat

Свойство border-image-repeat чегаранинг ички кисми расми сифатида такрорлаш усулини белгилайди. Батафсил маълумот учун border-image свойствосига қаранг.

Синтаксис

селектор {
	border-image-repeat: stretch | repeat | round;
}

Қийматлар

Параметрлар сони	Тасниф
`stretch`	Чегара расмини элемент ўлчамларигача чўзиб беради. Бу қиймат сунъий холда ишлатилади.
`repeat`	Чегара расмини такрорлайди.
`round`	Расмни такрорлайди ва уни элемент томонида бутун рақамли расмлар пайдо бўладиган қиликлашта масштаблайди.

Сунъий қиймат: stretch.

Параметрлар сони

1 ёки 2 параметрни қабул қилиши мумкин. Агар икки параметр берилган бўлса, у ҳолда биринчиси юқори ва пастки чегара учун, иккинчиси эса чап ва ўнг чегара учун ишлатилади.

Мисол . 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;
}

Мисол . 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;
}

Мисол . Round қиймати

Ҳозирги вақтда оддий ҳолатда repeat қиймати, курсорни устига олиб келганда эса round қиймати ўрнатилган. Эътиборингизга оложки, курсорни олиб келгичга қадар чегарада бутун бўлмаган ромбик сони жойлашган, курсорни олиб келгандан сўнг эса бутун сонда. round айнан шундай ишлайди:

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

Мисол . Икки сўз

Эни учун repeat қиймати ва баландлик учун stretch қиймати:

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

Шунингдек қаранг

border-image свойствоси,
бу чегара-расми учун қисқартмадир
border-image-source свойствоси,
бу чегара учун расм йўлини белгилайди
border-image-slice свойствоси,
бу чегара учун расмни бўлишдир
border-image-width свойствоси,
бу чегара учун расм ўлчамини белгилайди
border-image-outset свойствоси,
бу чегара учун расмни силжишини белгилайди