Egenskapen border-image-repeat

Egenskapen border-image-repeat angir måten den innvendige delen av kanten som bilde gjentas på. For mer detaljert informasjon se egenskapen border-image.

Syntaks

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

Verdier

Verdi	Beskrivelse
`stretch`	Strekker kantbildet til elementets dimensjoner. Denne verdien er standard.
`repeat`	Gjentar kantbildet.
`round`	Gjentar bildet og skalerer det slik at det blir et helt antall bilder på elementets side.

Standardverdi: stretch.

Antall parametere

Kan ta 1 eller 2 parametere. Hvis det er angitt to parametere, vil den første gjelde for øvre og nedre kant, og den andre parameteren - for venstre og høyre.

Eksempel . Verdien 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;
}

Eksempel . Verdien 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;
}

Eksempel . Verdien round

Nå er det i normal tilstand satt verdien repeat, og ved hovering - round. Legg merke til at før hovering passer det ikke et helt antall romber inn i kanten, men etter hovering - et helt. Slik fungerer 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;
}

Eksempel . To verdier

Verdien repeat for bredden og stretch for høyden:

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

Se også

egenskapen border-image,
som er en forkortelse for kant-bilde
egenskapen border-image-source,
som angir stien til bildet for kanten
egenskapen border-image-slice,
som deler bildet for kanten
egenskapen border-image-width,
som angir størrelsen på bildet for kanten
egenskapen border-image-outset,
som angir forskyvningen av bildet for kanten