Egenskapen border-image-width

Egenskapen border-image-width styr bredden på kantens synliga del, skalar den. Om detta värde är större än bredden på border-width, kommer kantbilden att krypa in under innehållet.

För mer detaljerad information, se egenskapen border-image.

Syntax

selektor {
	border-image-width: CSS-enheter | procent | nummer | auto;
}

Värden

Värde	Beskrivning
CSS-enheter	Värde i angivna CSS-enheter.
Procent	Värden i procent relativt storleken på blocket som kanten är satt på.
Nummer	Numeriskt värde som `border-width` multipliceras med.
`auto`	Nyckelord. Om det anges, är värdet lika med motsvarande `border-image-slice`. Om det inte finns någon lämplig storlek används värdet `border-width`, varvid bilden fyller hela kantens hörn och kryper in under innehållet. Se exemplen för bättre förståelse.

Standardvärde: 1.

Exempel . Nummer

Sätt värdet på border-image-width till 2 när musen hovrar över elementet. Därmed blir kanten storleken 26px*2 - 2 gånger större än dess bredd, angiven i border-width. Kanten kommer då att gå in under texten (som en typ av bakgrund):

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

Exempel . Ändra border-image-repeat till round

I föregående exempel kommer det inte att finnas ett helt antal rutor i kanten vid hovring. Vi åtgärdar detta genom att sätta border-image-repeat till värdet 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;
}

Exempel . Procent

Sätt värdet på border-image-width till 50% när musen hovrar över elementet. Därmed blir kanten storleken 50% av blockets storlek (det vill säga de två kanterna, höger och vänster, kommer att täcka hela blocket):

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

Exempel . Procent

Sätt värdet på border-image-width till 30% när musen hovrar över elementet. Därmed blir kanten storleken 30% av blockets storlek:

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

Exempel . Pixlar

Sätt värdet på border-image-width till 50px när musen hovrar över 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;
}

Exempel . Värdet auto

Sätt värdet på border-image-width till auto när musen hovrar över elementet.

Innan hovring har border-image-width värdet 1 (standard). I exemplet är border-width specifikt satt till 52px, och border-image-slice - till värdet 26 (effekten med auto observeras endast om border-width inte är lika med border-image-slice). På grund av att border-image-width har värdet 1, kommer kantbilden att uppta hela bredden på border-width, det vill säga sträckas ut över 52px. Vid hovring sätts värdet på border-image-width till auto och bildens bredd blir lika med värdet border-image-slice, det vill säga 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 även

egenskapen border-image,
som är en förkortning för kantbild
egenskapen border-image-source,
som anger sökvägen till bilden för kanten
egenskapen border-image-slice,
som delar upp bilden för kanten
egenskapen border-image-repeat,
som upprepning av bilden för kanten
egenskapen border-image-outset,
som anger förskjutning av bilden för kanten