Svojstvo border-image-width

Svojstvo border-image-width upravlja širinom vidljivog dela okvira, menja njegov razmer. Ako je ova vrednost veća od širine border-width, slika okvira će da se "uvuče" ispod sadržaja.

Za detaljnije informacije pogledajte svojstvo border-image.

Sintaksa

selektor {
	border-image-width: CSS jedinice | procenti | broj | auto;
}

Vrednosti

Vrednost	Opis
CSS jedinice	Vrednost u zadatim CSS jedinicama.
Procenti	Vrednosti u procentima u odnosu na veličinu bloka kome je zadat okvir.
Broj	Brojna vrednost kojom se množi `border-width`.
`auto`	Ključna reč. Ako je zadata, vrednost je jednaka odgovarajućoj vrednosti `border-image-slice`. Ako odgovarajuća veličina ne postoji, koristi se vrednost `border-width`, pri čemu slika popunjava ceo ugao okvira, uvlačeći se ispod sadržaja. Pogledajte primere za bolje razumevanje.

Podrazumevana vrednost: 1.

Primer . Broj

Podesimo vrednost border-image-width na 2 pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 26px*2 - 2 puta veći nego što je njegova širina zadata u border-width. Okvir će pri tome da "zadje" ispod teksta (kao pozadina):

<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 . Promenimo border-image-repeat u round

U prethodnom primeru pri prelasku mišem u okviru neće biti celobrojna količina rombića. Ispravimo to, podešavanjem 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 . Procenti

Podesimo vrednost border-image-width na 50% pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 50% od veličine bloka (to jest dva okvira, desni i levi, će da pokriju ceo 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 . Procenti

Podesimo vrednost border-image-width na 30% pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 30% od veličine 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 . Pikseli

Podesimo vrednost border-image-width na 50px pri prelasku mišem preko elementa:

<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

Podesimo vrednost border-image-width na auto pri prelasku mišem preko elementa.

Pre prelaska border-image-width ima vrednost 1 (podrazumevano). U primeru je namerno border-width zadato na 52px, a border-image-slice - na vrednost 26 (efekat sa auto će se videti samo ako border-width nije jednako border-image-slice). Zbog toga što border-image-width ima vrednost 1, slika okvira će da zauzme celu širinu border-width, to jest rastegnuće se na 52px. Pri prelasku vrednost border-image-width će se podesiti na auto i širina slike će postati jednaka vrednosti border-image-slice, to jest 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;
}

Pogledajte takođe

svojstvo border-image,
koje je skraćeni zapis za okvir-sliku
svojstvo border-image-source,
koje zadaje putanju do slike za okvir
svojstvo border-image-slice,
koje seče sliku za okvir
svojstvo border-image-repeat,
koje ponavlja sliku za okvir
svojstvo border-image-outset,
koje zadaje pomeraj slike za okvir