Egenskaben border-image-width

Egenskaben border-image-width styrer bredden af den synlige del af rammen, skalerer den. Hvis denne værdi er større end bredden af border-width, vil billedrammen kravle ind under indholdet.

For mere detaljeret information, se egenskaben border-image.

Syntaks

selektor {
	border-image-width: CSS-enheder | procenter | tal | auto;
}

Værdier

Værdi	Beskrivelse
CSS-enheder	Værdi i de angivne CSS-enheder.
Procenter	Værdier i procent i forhold til størrelsen af blokken, som rammen er angivet for.
Tal	Numerisk værdi, som `border-width` ganges med.
`auto`	Nøgleord. Hvis det er angivet, er værdien lig med den tilsvarende `border-image-slice`. Hvis der ikke er en passende størrelse, bruges værdien `border-width`, hvor billedet udfylder hele rammens hjørne og kravler ind under indholdet. Se eksemplerne for bedre forståelse.

Standardværdi: 1.

Eksempel . Tal

Indstil værdien af border-image-width til 2 når musen holdes over elementet. Ved dette vil rammen blive størrelsen 26px*2 - 2 gange større end dens bredde, angivet i border-width. Rammen vil herefter gå ind under teksten (som en baggrund):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Eksempel . Ændre border-image-repeat til round

I det foregående eksempel vil der ved hold ikke være et helt antal romber i rammen. Vi retter det ved at indstille border-image-repeat til værdien round:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Eksempel . Procenter

Indstil værdien border-image-width til 50% når musen holdes over elementet. Ved dette vil rammen blive størrelsen 50% af størrelsen af blokken (det vil sige de to rammer, højre og venstre, vil dække hele blokken):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Eksempel . Procenter

Indstil værdien af border-image-width til 30% når musen holdes over elementet. Ved dette vil rammen blive størrelsen 30% af størrelsen af blokken:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Eksempel . Pixels

Indstil værdien af border-image-width til 50px når musen holdes over elementet:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Eksempel . Værdien auto

Indstil værdien af border-image-width til auto når musen holdes over elementet.

Før hold har border-image-width værdien 1 (som standard). I eksemplet er border-width specifikt angivet til 52px, og border-image-slice - til værdien 26 (effekten med auto vil kun observeres hvis border-width ikke er lig med border-image-slice). På grund af at border-image-width har værdien 1, vil billedrammen optage hele bredden af border-width, det vil sige den strækkes til 52px. Ved hold indstilles værdien af border-image-width til auto og billedets bredde bliver lig med værdien border-image-slice, det vil sige 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Se også

egenskaben border-image,
som er en forkortelse for billedramme
egenskaben border-image-source,
som angiver stien til billedet for rammen
egenskaben border-image-slice,
som deler billedet for rammen
egenskaben border-image-repeat,
som gentager billedet for rammen
egenskaben border-image-outset,
som angiver forskydningen af billedet for rammen