Eigenschap border-image-width

De eigenschap border-image-width bepaalt de breedte van het zichtbare deel van de rand, schaalt het. Als deze waarde groter is dan de breedte van border-width, zal de randafbeelding onder de inhoud kruipen.

Voor meer gedetailleerde informatie, zie de eigenschap border-image.

Syntaxis

selector {
	border-image-width: CSS-eenheden | percentages | getal | auto;
}

Waarden

Waarde	Beschrijving
CSS-eenheden	Waarde in opgegeven CSS-eenheden.
Percentages	Waarden in percentages ten opzichte van de grootte van het blok waarvoor de rand is ingesteld.
Getal	Een numerieke waarde waarmee de `border-width` wordt vermenigvuldigd.
`auto`	Sleutelwoord. Als dit is ingesteld, is de waarde gelijk aan de corresponderende `border-image-slice`. Als er geen geschikte grootte is, wordt de waarde `border-width` gebruikt, waarbij de afbeelding de hele randhoek vult en onder de inhoud kruipt. Zie de voorbeelden voor een beter begrip.

Standaardwaarde: 1.

Voorbeeld . Getal

Stel de waarde van border-image-width in op 2 bij het zweven met de muis over het element. Hierdoor wordt de rand een grootte van 26px*2 - 2 keer groter dan de breedte ingesteld in border-width. De rand zal dan onder de tekst komen (als een soort achtergrond):

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

Voorbeeld . Verander border-image-repeat naar round

In het vorige voorbeeld zal er bij het zweven in de rand geen geheel aantal ruiten zijn. Laten we dit verbeteren door border-image-repeat in te stellen op de waarde 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;
}

Voorbeeld . Percentages

Stel de waarde border-image-width in op 50% bij het zweven met de muis over het element. Hierdoor wordt de rand een grootte van 50% van de grootte van het blok (dat wil zeggen, de twee randen, rechts en links, zullen het hele blok bedekken):

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

Voorbeeld . Percentages

Stel de waarde van border-image-width in op 30% bij het zweven met de muis over het element. Hierdoor wordt de rand een grootte van 30% van de grootte van het blok:

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

Voorbeeld . Pixels

Stel de waarde van border-image-width in op 50px bij het zweven met de muis over het element:

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

Voorbeeld . Waarde auto

Stel de waarde van border-image-width in op auto bij het zweven met de muis over het element.

Voor het zweven heeft border-image-width de waarde 1 (standaard). In het voorbeeld is specifiek border-width ingesteld op 52px, en border-image-slice - op de waarde 26 (het effect met auto wordt alleen waargenomen als border-width niet gelijk is aan border-image-slice). Omdat border-image-width de waarde 1 heeft, zal de randafbeelding de volledige breedte van border-width innemen, dat wil zeggen uitrekken tot 52px. Bij het zweven wordt de waarde van border-image-width ingesteld op auto en de breedte van de afbeelding wordt gelijk aan de waarde van border-image-slice, dat wil zeggen 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;
}

Zie ook

de eigenschap border-image,
dat een verkorte notatie is voor de randafbeelding
de eigenschap border-image-source,
dat het pad naar de afbeelding voor de rand instelt
de eigenschap border-image-slice,
dat de opdeling van de afbeelding voor de rand instelt
de eigenschap border-image-repeat,
dat de herhaling van de afbeelding voor de rand instelt
de eigenschap border-image-outset,
dat de verschuiving van de afbeelding voor de rand instelt