Lastnost border-image

Lastnost border-image določa sliko za obrobo, je lastnost okrajšava za lastnosti border-image-source, border-image-slice, border-image-repeat, border-image-width in border-image-outset. Lastnost-okrajšava se je pojavila v CSS prej kot okrajšane lastnosti in zato je podprta v večjem številu starih brskalnikov.

Sintaksa

selektor {
	border-image: url(pot do slike) odmik/debélina/premik ponavljanje;
}

Opis

Slika, ki jo želimo uporabiti za obrobo, mora biti oblikovana na poseben način: 4 mini slike za vogale in 4 slike za stranice. Primer takšne slike:

V tem primeru je osrednji del pustjen bel (ker ne želimo, da pade na ozadje elementa). Primer slike z zapolnjenim osrednjim delom:

Vrednost slice pove brskalniku, katere dele slike bodo šli na vogale, a katere na stranice (in kateri del bo osrednji). Na vogale gredo 4 deli, na stranice gredo 4 deli in en del (osrednji) gre na ozadje elementa (opcijsko, ključna beseda fill).

Slika se "razreže" na koščke na naslednji način: za vrednost slice se določi od ene do štirih vrednosti. Razložimo na primeru. Naj bodo podane naslednje vrednosti: 10 20 30 40 (pikseli px se ne navajajo, to je zato, ker je lahko slika tako rastrska kot vektorska). Vrednosti povejo naslednje: 10 odreži zgoraj, 20 odreži desno, 30 odreži spodaj, 40 odreži levo. Kateri del slike bo prišel v levi zgornji vogal? To bo košček: 10 zgoraj, 40 levo. V desni zgornji vogal bo prišel 10 zgoraj, 20 desno. In tako naprej.

Pogosto je slika simetrična (kot rombi zgoraj) in moramo odrezati enake koščke za vogale. V tem primeru se navede ena vrednost, ki bo določala enake odmike z vseh strani. Da odrežemo oranžne rombe, bomo navedli slice v 26 (ker ima oranžen romb velikost 26px na 26px). Rumeni rombi bodo padli na črte obrobe in z njimi se bo zgodilo naslednje: ali se bodo raztegnili na celoten blok ali se bodo ponavljali vzdolž obrobe (odvisno 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;
}

Lastnost border-image ne dovoljuje navedbe debeline obrobe elementa. Brskalnik preprosto razteza sliko vzdolž obrobe z že obstoječo širino. Zato jo je treba nastaviti preko lastnosti border.

Uporabniki starih brskalnikov (ali z onemogočenimi silkami) bodo videli standardni okvir, nastavljen v border, zato je smiselno, da mu nastavimo ustrezne stile in barvo.

Vrednosti

Vrednost	Opis
url(Pot do slike)	Pot do slike. Podrobneje glejte `border-image-source`.
odmik	Pove brskalniku, katere dele slike bodo šli na vogale, katere na stranice (in kateri del bo osrednji). Možne vrednosti: od `1`-ega do `4`-ih števil \| od `1`-ega do `4`-ih odstotkov. Preko presledka je lahko podana ključna beseda `fill` poleg števil ali odstotkov. Podrobneje glejte `border-image-slice`.
debélina	Lastnost upravlja s širino vidnega dela okvirja, jo spreminja glede na obrobe. Če je ta vrednost večja od širine `border-width`, bo slika okvirja zalezla pod vsebino. Možne vrednosti: CSS enote \| odstotki \| število \| `auto`. Podrobneje glejte `border-image-width`.
premik	Zanimiva lastnost, ki omogoča, da okvir premaknemo zunaj meja elementa. Negativne vrednosti niso podprte. Možne vrednosti: CSS enote (razen % (?)) \| pozitivno število \| auto. Podrobneje glejte `border-image-outset`.
ponavljanje	Določa, kako ponavljati sliko na obrobah (ne na vogalih): tlakovati ali raztegniti. Možne vrednosti: `stretch` \| `repeat` \| `round` \| `space`. Podrobneje glejte `border-image-repeat`.

Privzeta vrednost: none 100%/1/0 stretch (url(pot do slike) odmik/debélina/premik 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

Trenutno je v normalnem stanju nastavljena vrednost repeat, ob preletu miške pa - round. Opazite, da se pred preletom v obrobo ne postavi celo število rombov, po preletu pa - celo. Tako deluje 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 besedi

Vrednost repeat za širino in stretch za višino:

<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 . Ujemanje širine slike s širino obrobe

Povečajmo border-width ob preletu miške, pri tem debelino border-image pustimo enako. Rombi se bodo raztegnili na celotno obrobo:

<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

Vzemimo drugo sliko, v kateri različni koščki niso enaki:

Navedimo, katere dele slike je treba odrezati - 25% 30% 10% 20%. Deluje tako: 25% - odmik zgoraj, 30% - odmik desno, 10% - odmik spodaj, 20% - odmik levo. V bistvu s temi koščki odrežemo vogale. Zgornji levi vogal bo 25% zgoraj slike, in 20% levo. Zgornji desni vogal bo 25% zgoraj slike, in 30% desno in tako naprej.

Tudi, če miško preletite čez blok, bo delovala ključna beseda fill, in osrednji del slike bo postal ozadje našega 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

Naredimo gradientno obrobo z linearnim gradientom:

<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

Nastavimo vrednost border-image-width na 2 (slika obrobe bo postala 2-krat večja od same obrobe) ob preletu miške čez element (26/2 - navedeno za poševnico, pri temer je 26 - vrednost border-image-slice). Opazite, da se sama obroba ni povečala, slika obrobe pa - da, ker bo zalezla pod besedilo:

<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

Nastavimo vrednost border-image-outset na 3 ob preletu miške čez element. (26/1/2 - navedeno za drugo poševnico, pri temer 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;
}

Glejte tudi

lastnost border-image-source,
ki določa pot do slike za obrobo
lastnost border-image-slice,
ki določa razdelitev slike za obrobo
lastnost border-image-repeat,
ki določa ponavljanje slike za obrobo
lastnost border-image-width,
ki določa velikost slike za obrobo
lastnost border-image-outset,
ki določa premik slike za obrobo