Eienskap border-image-width

Die eienskap border-image-width beheer die wydte van die sigbare deel van die rand, skaal dit. As hierdie waarde groter is as die wydte van border-width, sal die randbeeld onder die inhoud in kruip.

Vir meer gedetailleerde inligting, sien die eienskap border-image.

Sintaksis

selektor {
	border-image-width: CSS eenhede | persentasies | getal | auto;
}

Waardes

Waarde	Beskrywing
CSS eenhede	Waarde in gespesifiseerde CSS eenhede.
Persentasies	Waardes in persentasie relatief tot die grootte van die blok waaraan die rand toegeken is.
Getal	'n Numeriese waarde waarmee die `border-width` vermenigvuldig word.
`auto`	'n Sleutelwoord. As dit gespesifiseer is, is die waarde gelyk aan die ooreenstemmende `border-image-slice`. As daar geen geskikte grootte is nie, word die waarde van `border-width` gebruik, terwyl die beeld die hele randhoek vul en onder die inhoud in kruip. Sien die voorbeelde vir beter begrip.

Verstekwaarde: 1.

Voorbeeld . Getal

Stel die waarde van border-image-width in op 2 wanneer die muis oor die element beweeg. In hierdie geval sal die rand 'n grootte van 26px*2 hê - 2 keer groter as die wydte daarvan wat in border-width gespesifiseer is. Die rand sal dan onder die teks ingaan (soos 'n agtergrond):

<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 na round

In die vorige voorbeeld sal daar nie 'n heelgetal ruitjies in die rand wees by beweging nie. Laat ons dit regstel deur border-image-repeat op die waarde round te stel:

<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 . Persentasies

Stel die border-image-width waarde op 50% wanneer die muis oor die element beweeg. In hierdie geval sal die rand 'n grootte van 50% van die grootte van die blok hê (dit wil sê, die twee rande, die regter- en linker, sal die hele blok bedek):

<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 . Persentasies

Stel die waarde van border-image-width op 30% wanneer die muis oor die element beweeg. In hierdie geval sal die rand 'n grootte van 30% van die grootte van die blok hê:

<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 die waarde van border-image-width op 50px wanneer die muis oor die element beweeg:

<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 die waarde van border-image-width op auto wanneer die muis oor die element beweeg.

Voor beweging het border-image-width die waarde 1 (verstek). In die voorbeeld word border-width spesifiek op 52px gestel, en border-image-slice - op die waarde 26 (die effek met auto sal slegs waargeneem word as border-width nie gelyk is aan border-image-slice nie). As gevolg daarvan dat border-image-width die waarde 1 het, sal die randbeeld die hele wydte van border-width beslaan, dit is, dit sal oor 52px uitrek. Met beweging word die waarde van border-image-width gestel op auto en die wydte van die beeld sal gelyk wees aan die waarde van border-image-slice, dit is 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;
}

Sien ook

die eienskap border-image,
wat 'n kortvorm is vir die randbeeld
die eienskap border-image-source,
wat die pad na die beeld vir die rand spesifiseer
die eienskap border-image-slice,
wat die sny van die beeld vir die rand is
die eienskap border-image-repeat,
wat die herhaling van die beeld vir die rand is
die eienskap border-image-outset,
wat die verskuiwing van die beeld vir die rand spesifiseer