Vlastnosť border-image

Vlastnosť border-image nastavuje obrázok pre okraj, je to skrátená vlastnosť pre vlastnosti border-image-source, border-image-slice, border-image-repeat, border-image-width a border-image-outset. Táto skrátená vlastnosť sa objavila v CSS skôr ako vlastnosti, ktoré skracuje, a preto je podporovaná vo väčšom množstve starých prehliadačov.

Syntax

selektor {
	border-image: url(cesta k obrázku) posunutie/šírka/odsadenie opakovanie;
}

Popis

Obrázok, ktorý chceme použiť pre okraj, musí byť špeciálne upravený: 4 miniatúrne obrázky pre rohy a 4 obrázky pre strany. Príklad takého obrázku:

V tomto prípade je centrálna časť ponechaná biela (pretože nechceme, aby sa dostala na pozadie elementu). Príklad obrázku s vyplnenou centrálnou časťou:

Hodnota slice určuje prehliadaču, ktoré časti obrázku pôjdu na rohy, a ktoré na strany (a ktorá časť bude centrálnou). Na rohy idú 4 časti, na strany idú 4 časti a jedna časť (centrálna) ide na pozadie elementu (voliteľne, kľúčové slovo fill).

Obrázok je "rozrezaný" na kúsky nasledovným spôsobom: pre hodnotu slice je zadaná od jednej do štyroch hodnôt. Poďme si to rozobrať na príklade. Nech sú zadané nasledujúce hodnoty: 10 20 30 40 (pixely px neuvádzame, je to spôsobené tým, že obrázok môže byť rastrový aj vektorový). Hodnoty hovoria o nasledovnom: 10 odrezať zhora, 20 odrezať sprava, 30 odrezať zdola, 40 odrezať zľava. Ktorá časť obrázku pôjde do ľavého horného rohu? Bude to kúsok: 10 zhora, 40 zľava. Do pravého horného rohu pôjde 10 zhora, 20 sprava. A tak ďalej.

Najčastejšie je obrázok symetrický (ako napríklad kosoštvorce vyššie) a potrebujeme odrezať rovnaké kúsky pre rohy. V takom prípade sa uvádza jedna hodnota, ktorá bude nastavovať rovnaké posunutia zo všetkých strán. Aby sme odrezali oranžové kosoštvorce, uvedieme slice ako 26 (pretože oranžový kosoštvorec má veľkosť 26px na 26px). Žlté kosoštvorce pôjdu na línie okraja a stane sa s nimi nasledovné: buď sa roztiahnu na celý blok, alebo sa budú opakovať pozdĺž okraja (závisí od hodnoty 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;
}

Vlastnosť border-image neumožňuje nastaviť šírku okraja elementu. Prehliadač jednoducho roztiahne obrázok pozdĺž okraja s už existujúcou šírkou. Preto ju treba nastavovať pomocou vlastnosti border.

Používatelia starých prehliadačov (alebo s vypnutými obrázkami) uvidia štandardný rám, nastavený v border, preto má zmysel nastaviť mu vhodný štýl a farbu.

Hodnoty

Hodnota	Popis
url(Cesta k obrázku)	Cesta k obrázku. Viac detailov pozri `border-image-source`.
posunutie	Určuje prehliadaču, ktoré časti obrázku pôjdu na rohy, a ktoré na strany (a ktorá časť bude centrálnou). Možné hodnoty: od `1`-ej do `4`-ich čísel \| od `1`-ej do `4`-ich percent. Medzerou môže byť zadané kľúčové slovo `fill` okrem čísel alebo percent. Viac detailov pozri `border-image-slice`.
šírka	Vlastnosť riadi šírku viditeľnej časti rámu, škáluje ju. Ak je táto hodnota väčšia ako šírka `border-width`, obrázok rámu zalezie pod obsah. Možné hodnoty: CSS jednotky \| percentá \| číslo \| `auto`. Viac detailov pozri `border-image-width`.
odsadenie	Zaujímavá vlastnosť, ktorá umožňuje posunúť rám mimo element. Záporné hodnoty nie sú podporované. Možné hodnoty: CSS jednotky (okrem % (?)) \| kladné číslo \| auto. Viac detailov pozri `border-image-outset`.
opakovanie	Určuje, ako opakovať obrázok na okrajoch (nie na rohoch): dláždiť alebo roztiahnuť. Možné hodnoty: `stretch` \| `repeat` \| `round` \| `space`. Viac detailov pozri `border-image-repeat`.

Predvolená hodnota: none 100%/1/0 stretch (url(cesta k obrázku) posunutie/šírka/odsadenie opakovanie).

Príklad . border-image-repeat: hodnota 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;
}

Príklad . border-image-repeat: hodnota 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;
}

Príklad . border-image-repeat: hodnota round

Teraz je v normálnom stave nastavená hodnota repeat, a pri prejdení myšou - round. Všimnite si, že pred prejdením sa do okraja zmestí nie celé množstvo kosoštvorcov, ale po prejdení - celé. Tak funguje 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;
}

Príklad . border-image-repeat: dve slová

Hodnota repeat pre šírku a stretch pre výšku:

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

Príklad . Zhoda šírky obrázku so šírkou okraja

Zväčšíme border-width pri prejdení myšou, pričom šírku border-image necháme rovnakú. Kosoštvorce sa roztiahnu na celý okraj:

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

Príklad . border-image-slice

Zoberme si iný obrázok, v ktorom sú rôzne kúsky nerovnaké:

Určíme, ktoré časti z obrázku treba odrezať - 25% 30% 10% 20%. Funguje to takto: 25% - odsadenie zhora, 30% - odsadenie sprava, 10% - odsadenie zdola, 20% - odsadenie zľava. V podstate týmito kúskami odrežeme rohy. Horný ľavý roh bude 25% zhora obrázku, a 20% zľava. Horný pravý roh bude 25% zhora obrázku, a 30% sprava a tak ďalej.

Tiež, ak prejdete myšou nad blok, zapne sa kľúčové slovo fill, a centrálna časť obrázku sa stane pozadím nášho bloku:

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

Príklad

Vytvorme gradientový okraj pomocou lineárneho gradientu:

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

Príklad . border-image-width

Nastavme hodnotu border-image-width na 2 (obrázok okraja sa stane 2 krát väčší ako samotný okraj) pri prejdení myšou nad element (26/2 - sme uviedli za lomkou, pričom 26 - je hodnota border-image-slice). Všimnite si, že samotný okraj sa nezväčšil, ale obrázok okraja - áno, pretože zalezie pod text:

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

Príklad . border-image-outset

Nastavme hodnotu border-image-outset na 3 pri prejdení myšou nad element. (26/1/2 - sme uviedli za druhou lomkou, pričom 26 - je hodnota 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;
}

Pozri tiež

vlastnosť border-image-source,
ktorá nastavuje cestu k obrázku pre okraj
vlastnosť border-image-slice,
ktorá nastavuje rozdelenie obrázku pre okraj
vlastnosť border-image-repeat,
ktorá nastavuje opakovanie obrázku pre okraj
vlastnosť border-image-width,
ktorá nastavuje veľkosť obrázku pre okraj
vlastnosť border-image-outset,
ktorá nastavuje posunutie obrázku pre okraj