Border-image-repeat hossasy

border-image-repeat hossasy, surat görnüşindäki çäginiň içki böleginiň gaýtalanýan usulyny kesgitleýär. Giňişleýin maglumat üçin border-image hossasyna serediň.

Sintaksis

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

Görnüşleri

Parametr sany	Düşündiriş
`stretch`	Çäginiň suratyny element ölçeglerine çenli giňeldýär. Bu görnüş bellenen ýagdaýda ulanylýar.
`repeat`	Çäginiň suratyny gaýtalaýar.
`round`	Suraty gaýtalaýar we element tarapynda bitin sanly surat ýerleşmek üçin ony masştablaýar.

Bellenen ýagdaýdaky görnüşi: stretch.

Parametr sany

1 ýa-da 2 parametr kabul edip biler. Iki parametr berlen bolsa, birinjisi ýokarky we aşaky çägiler üçin, ikinji parametr bolsa çep we sag çägiler üçin bolar.

Mysal . Stretch görnüşi

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

Mysal . Repeat görnüşi

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

Mysal . Round görnüşi

Häzirki wagtda adaty ýagdaýda repeat görnüşi bellendi, göz ýetirilende bolsa - round görnüşi bellendi. Üns beriň, göz ýetirilmezden ozal çägide bitin sanly rombik ýerleşmeýär, göz ýetirilenden soňra bolsa bitin sanly. Şeýlelik bilen round işleýär:

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

Mysal . Iki söz

repeat görnüşi ini üçin we stretch görnüşi beýikligi üçin:

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

Şeýle-de serediň

border-image hossasy,
surat-çäginiň gysgaltmasy
border-image-source hossasy,
çägi üçin surat ýoluny kesgitleýär
border-image-slice hossasy,
çägi üçin surat bölümi
border-image-width hossasy,
çägi üçin surat ölçegini kesgitleýär
border-image-outset hossasy,
çägi üçin surat süýşmesini kesgitleýär