Svojstvo border-image

Svojstvo border-image postavlja sliku za okvir, ono je skraćeni oblik za svojstva border-image-source, border-image-slice, border-image-repeat, border-image-width i border-image-outset. Pritom je skraćeno svojstvo nastalo u CSS-u ranije od svojstava koja skraćuje i zato je podržano u većem broju starih brauzera.

Sintaksa

selektor {
	border-image: url(putanja do slike) pomeranje/debljina/pomeranje ponavljanje;
}

Opis

Slika koju želimo da primenimo za okvir mora biti posebno uobličena: 4 mini slike za uglove i 4 slike za strane. Primer takve slike:

U ovom slučaju centralni deo je ostavljen beo (pošto ne želimo da se on pojavi na pozadini elementa). Primer slike sa popunjenim centralnim delom:

Vrednost slice govori brauzeru, koji delovi slike će ići na uglove, a koji na strane (i koji deo će biti centralni). Na uglove idu 4 dela, na strane idu 4 dela i jedan deo (centralni) ide na pozadinu elementa (opciono, ključna reč fill).

Slika se "seče" na komade na sledeći način: za vrednost slice se navodi od jedne do četiri vrednosti. Hajde da razmotrimo na primeru. Neka su navedene sledeće vrednosti: 10 20 30 40 (pikseli px se ne navode, to je povezano sa time da slika može biti i rasterska i vektorska). Vrednosti govore o sledećem: 10 odseći od vrha, 20 odseći sa desne strane, 30 odseći od dna, 40 odseći sa leve strane. Koji deo slike će pasti u gornji levi ugao? To će biti komadić: 10 od vrha, 40 sa leve strane. U desni gornji ugao će pasti 10 od vrha, 20 sa desne strane. I tako dalje.

Najčešće je slika simetrična (kao rombovi gore) i treba nam da odsečemo jednake komadiće za uglove. U tom slučaju se navodi jedna vrednost, koja će zadati jednaka pomeranja sa svih strana. Da bismo odsekli narandžaste rombove, navedemo slice kao 26 (jer narandžasti romb ima veličinu 26px na 26px). Žuti rombovi će pasti na linije okvira i sa njima će se desiti sledeće: oni će se ili rastegnuti na ceo blok ili će se ponavljati duž okvira (zavisi od vrednosti repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Svojstvo border-image ne dozvoljava da se navede debljina okvira elementa. Brauzer jednostavno rasteže sliku duž okvira sa već postojećom širinom. Zato je treba zadati preko svojstva border.

Korisnici starih brauzera (ili sa isključenim slikama) videće standardni okvir, zadat u border, zato ima smisla da mu se zadaju odgovarajući stil i boja.

Vrednosti

Vrednost	Opis
url(Putanja do slike)	Putanja do slike. Više detalja pogledajte u `border-image-source`.
pomeranje	Govori brauzeru, koji delovi slike će ići na uglove, a koji na strane (i koji deo će biti centralni). Moguće vrednosti: od `1`-og do `4` brojeva \| od `1`-og do `4` procenata. Razmakom može da se navede ključna reč `fill` pored brojeva ili procenata. Više detalja pogledajte u `border-image-slice`.
debljina	Svojstvo upravlja širinom vidljivog dela okvira, skalira ga. Ako je ova vrednost veća od širine `border-width`, slika okvira zavlači se pod sadržaj. Moguće vrednosti: CSS jedinice \| procenti \| broj \| `auto`. Više detalja pogledajte u `border-image-width`.
pomeranje	Zanimljivo svojstvo koje omogućava da se okvir pomera izvan granica elementa. Negativne vrednosti nisu podržane. Moguće vrednosti: CSS jedinice (osim % (?)) \| pozitivan broj \| auto. Više detalja pogledajte u `border-image-outset`.
ponavljanje	Određuje kako da se ponavlja slika na okvirima (ne na uglovima): da li da se poploča ili rastegne. Moguće vrednosti: `stretch` \| `repeat` \| `round` \| `space`. Više detalja pogledajte u `border-image-repeat`.

Podrazumevana vrednost: none 100%/1/0 stretch (url(putanja do slike) pomeranje/debljina/pomeranje ponavljanje).

Primer . border-image-repeat: vrednost repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . border-image-repeat: vrednost stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . border-image-repeat: vrednost round

Sada je u normalnom stanju postavljena vrednost repeat, a pri prelasku mišem - round. Obratite pažnju da se pre prelaska u okvir ne uklapa ceo broj rombova, a posle prelaska - ceo broj. Tako funkcioniše round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . border-image-repeat: dve reči

Vrednost repeat za širinu i stretch za visinu:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . Poklapanje širine slike sa širinom okvira

Povećaćemo border-width pri prelasku mišem, pri tome debljinu border-image ostavimo istom. Romboli će se rastegnuti na ceo okvir:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . border-image-slice

Uzmimo drugu sliku, u kojoj različiti komadi nisu jednaki:

Navedimo, koji delovi slike treba da se odseku - 25% 30% 10% 20%. Funkcioniše to ovako: 25% - pomeranje od vrha, 30% - pomeranje sa desne strane, 10% - pomeranje od dna, 20% - pomeranje sa leve strane. U suštini ovim komadima seku se uglovi. Gornji levi ugao će biti 25% od vrha slike, i 20% sa leve strane. Gornji desni ugao će biti 25% od vrha slike, i 30% sa desne strane i tako dalje.

Takođe, ako pređete mišem preko bloka, aktiviraće se ključna reč fill, i centralni deo slike će postati pozadina našeg bloka:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Primer

Napravićemo gradijentni okvir pomoću linearnog gradijenta:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Primer . border-image-width

Postavimo vrednost border-image-width na 2 (slika okvira će postati 2 puta veća od samog okvira) pri prelasku mišem preko elementa (26/2 - navedeno posle kosih crta, pri čemu je 26 vrednost border-image-slice). Obratite pažnju na to da se sam okvir nije povećao, a slika okvira - jeste, pošto će se ona zavući ispod teksta:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Primer . border-image-outset

Postavimo vrednost border-image-outset na 3 pri prelasku mišem preko elementa. (26/1/2 - navedeno posle druge kose crte, pri čemu je 26 vrednost border-image-slice, a - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Pogledajte takođe

svojstvo border-image-source,
koje zadaje putanju do slike za okvir
svojstvo border-image-slice,
koje zadaje podelu slike za okvir
svojstvo border-image-repeat,
koje zadaje ponavljanje slike za okvir
svojstvo border-image-width,
koje zadaje veličinu slike za okvir
svojstvo border-image-outset,
koje zadaje pomeranje slike za okvir