Eienskap border-image-repeat

Die eienskap border-image-repeat spesifiseer hoe die binnekant van die rand as 'n prentjie herhaal moet word. Vir meer gedetailleerde inligting sien die eienskap border-image.

Sintaksis

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

Waardes

Aantal parameters	Beskrywing
`stretch`	Rek die randprentjie uit na die grootte van die element. Hierdie waarde is die verstekwaarde.
`repeat`	Herhaal die randprentjie.
`round`	Herhaal die prentjie en skaal dit sodat 'n heelgetal van prentjies op die element se kant pas.

Verstekwaarde: stretch.

Aantal parameters

Kan 1 of 2 parameters aanvaar. As twee parameters gegee word, sal die eerste een vir die boonste en onderste rand wees, en die tweede parameter - vir die linker en regterkant.

Voorbeeld . Waarde 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;
}

Voorbeeld . Waarde 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;
}

Voorbeeld . Waarde round

Tans is die waarde repeat in die normale toestand, en by wys round. Let daarop dat voor wys daar nie 'n heelgetal ruitjies in die rand pas nie, maar na wys - wel. So werk 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;
}

Voorbeeld . Twee woorde

Waarde repeat vir die breedte en stretch vir die hoogte:

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

Sien ook

die eienskap border-image,
wat 'n afkorting is vir 'n rand-prentjie
die eienskap border-image-source,
wat die pad na die prentjie vir die rand spesifiseer
die eienskap border-image-slice,
wat die sny van die prentjie vir die rand spesifiseer
die eienskap border-image-width,
wat die grootte van die prentjie vir die rand spesifiseer
die eienskap border-image-outset,
wat die verskuiwing van die prentjie vir die rand spesifiseer