Egenskaben border-image-repeat

Egenskaben border-image-repeat angiver hvordan den indre del af en ramme som billede skal gentages. For mere detaljeret information se egenskaben border-image.

Syntaks

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

Værdier

Antal parametre	Beskrivelse
`stretch`	Strækker rammebilledet til elementets størrelse. Denne værdi bruges som standard.
`repeat`	Gentager rammebilledet.
`round`	Gentager billedet og skalerer det, så der vil være et helt antal billeder på elementets side.

Standardværdi: stretch.

Antal parametre

Kan tage 1 eller 2 parametre. Hvis der angives to parametre, så vil den første gælde for den øverste og nederste ramme, og den anden parameter - for den venstre og højre.

Eksempel . Værdien 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 . Værdien 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 . Værdien round

I normaltilstand er der indstillet værdien repeat, og ved hover - round. Læg mærke til at før hover passer der ikke et helt antal rombier ind i rammen, men efter hover - et helt antal. Sådan virker 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 ord

Værdien repeat for bredden og stretch for højden:

<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å

egenskaben border-image,
som er en sammentrækning for ramme-billede
egenskaben border-image-source,
som angiver stien til billedet for rammen
egenskaben border-image-slice,
som opdeling af billedet for rammen
egenskaben border-image-width,
som angiver størrelsen på billedet for rammen
egenskaben border-image-outset,
som angiver forskydningen af billedet for rammen