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 касиети,
чек үчүн сүрөттүн жылышын белгилейт