Egenskapen border-image-width

Egenskapen border-image-width styrer bredden på den synlige delen av rammen, skalerer den. Hvis denne verdien er større enn bredden på border-width, vil rammebildet krype inn under innholdet.

For mer detaljert informasjon, se egenskapen border-image.

Syntaks

selector {
	border-image-width: CSS-enheter | prosent | tall | auto;
}

Verdier

Verdi	Beskrivelse
CSS-enheter	Verdi i angitte CSS-enheter.
Prosent	Verdier i prosent i forhold til størrelsen på blokken som rammen er satt for.
Tall	Numerisk verdi som `border-width` multipliseres med.
`auto`	Nøkkelord. Hvis det er satt, er verdien lik den tilsvarende `border-image-slice`. Hvis det ikke finnes en passende størrelse, brukes verdien `border-width`, hvor bildet fyller hele rammekroken og kryper under innholdet. Se eksempler for bedre forståelse.

Standardverdi: 1.

Eksempel . Tall

La oss sette verdien border-image-width til 2 når musepekeren holdes over elementet. Da vil rammen bli størrelse 26px*2 - 2 ganger større enn bredden som er satt i border-width. Rammen vil da gå inn under teksten (som en slags bakgrunn):

<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 . Endre border-image-repeat til round

I forrige eksempel vil det ikke være et helt antall romber i rammen når musepekeren holdes over. La oss rette dette ved å sette border-image-repeat til verdien 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 . Prosent

La oss sette verdien border-image-width til 50% når musepekeren holdes over elementet. Da vil rammen bli størrelse 50% av størrelsen på blokken (det vil si at de to rammene, høyre og venstre, vil dekke 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 . Prosent

La oss sette verdien border-image-width til 30% når musepekeren holdes over elementet. Da vil rammen bli størrelse 30% av størrelsen på 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 . Piksler

La oss sette verdien border-image-width til 50px når musepekeren 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 . Verdien auto

La oss sette verdien border-image-width til auto når musepekeren holdes over elementet.

Før musepekeren holdes over har border-image-width verdien 1 (standard). I eksempelet er border-width spesifikt satt til 52px, og border-image-slice - til verdien 26 (effekten med auto vil kun observeres hvis border-width ikke er lik border-image-slice). På grunn av at border-image-width har verdien 1, vil rammebildet oppta hele bredden på border-width, det vil si strekke seg over 52px. Når musepekeren holdes over vill verdien border-image-width settes til auto og bredden på bildet vil bli lik verdien border-image-slice, det vil si 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å

egenskapen border-image,
som er en forkortelse for rammebilde
egenskapen border-image-source,
som angir stien til bildet for rammen
egenskapen border-image-slice,
som deler bildet for rammen
egenskapen border-image-repeat,
som gjentar bildet for rammen
egenskapen border-image-outset,
som angir forskyvning av bildet for rammen