Lastnost border-image-width

Lastnost border-image-width nadzoruje širino vidnega dela obrobe, jo skalira. Če je ta vrednost večja od širine border-width, bo slika obrobe zlezla pod vsebino.

Za podrobnejše informacije glejte lastnost border-image.

Sintaksa

selektor {
	border-image-width: CSS enote | odstotki | število | auto;
}

Vrednosti

Vrednost	Opis
CSS enote	Vrednost v podanih CSS enotah.
Odstotki	Vrednosti v odstotkih glede na velikost bloka, ki mu je določena obroba.
Število	Številčna vrednost, s katero se pomnoži `border-width`.
`auto`	Ključna beseda. Če je nastavljena, je vrednost enaka ustreznemu `border-image-slice`. Če primerne velikosti ni, se uporabi vrednost `border-width`, pri čemer slika zapolni celoten kot obrobe in zleze pod vsebino. Za boljše razumevanje glejte primere.

Privzeta vrednost: 1.

Primer . Število

Nastavimo vrednost border-image-width na 2 ob preletu miške nad elementom. Pri tem bo obroba postala velika 26px*2 - 2 krat večja od njene širine, določene v border-width. Obroba bo pri tem zlezla pod besedilo (kot ozadje):

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

Primer . Spremenimo border-image-repeat na round

V prejšnjem primeru ne bo celega števila rombov v obrobi ob preletu miške. Popravimo to z nastavitvijo border-image-repeat na vrednost 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;
}

Primer . Odstotki

Nastavimo vrednost border-image-width na 50% ob preletu miške nad elementom. Pri tem bo obroba postala velika 50% od velikosti bloka (to pomeni, da bosta dve obrobi, desna in leva, pokrili celoten blok):

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

Primer . Odstotki

Nastavimo vrednost border-image-width na 30% ob preletu miške nad elementom. Pri tem bo obroba postala velika 30% od velikosti bloka:

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

Primer . Piksli

Nastavimo vrednost border-image-width na 50px ob preletu miške nad elementom:

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

Primer . Vrednost auto

Nastavimo vrednost border-image-width na auto ob preletu miške nad elementom.

Pred preletom ima border-image-width vrednost 1 (privzeto). V primeru je namenoma border-width nastavljena na 52px, border-image-slice pa na vrednost 26 (učinek z auto bo opazen le, če border-width ni enaka border-image-slice). Ker ima border-image-width vrednost 1, bo slika obrobe zasedla celotno širino border-width, torej se bo raztegnila na 52px. Ob preletu miške se bo vrednost border-image-width nastavila na auto in širina slike postala enaka vrednosti border-image-slice, torej 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;
}

Glejte tudi

lastnost border-image,
ki je okrajšava za obrobo-sliko
lastnost border-image-source,
ki določa pot do slike za obrobo
lastnost border-image-slice,
ki razreže sliko za obrobo
lastnost border-image-repeat,
ki ponavlja sliko za obrobo
lastnost border-image-outset,
ki določa premik slike za obrobo