Vlastnost border-image

Vlastnost border-image nastavuje obrázek pro ohraničení, je to zkratková vlastnost pro vlastnosti border-image-source, border-image-slice, border-image-repeat, border-image-width a border-image-outset. Přitom zkratková vlastnost se v CSS objevila dříve než vlastnosti, které zkracuje, a proto je podporována ve větším množství starých prohlížečů.

Syntaxe

selektor {
	border-image: url(cesta k obrázku) posunuti/tloustka/odsazeni opakovani;
}

Popis

Obrázek, který chceme použít pro ohraničení, musí být upraven speciálním způsobem: 4 mini obrázky pro rohy a 4 obrázky pro strany. Příklad takového obrázku:

V tomto případě je centrální část ponechána bílá (protože nechceme, aby se dostala na pozadí elementu). Příklad obrázku s vyplněnou centrální částí:

Hodnota slice udává prohlížeči, které části obrázku půjdou na rohy, a které na strany (a která část bude centrální). Na rohy jdou 4 části, na strany jdou 4 části a jedna část (centrální) jde na pozadí elementu (volitelně, klíčové slovo fill).

Obrázek je "rozřezán" na kousky následujícím způsobem: pro hodnotu slice je určeno od jedné do čtyř hodnot. Pojďme to rozebrat na příkladu. Nechť jsou určeny následující hodnoty: 10 20 30 40 (pixely px nejsou uváděny, je to spojeno s tím, že obrázek může být jak rastrový, tak vektorový). Hodnoty říkají následující: 10 odstranit shora, 20 odstranit zprava, 30 odstranit zdola, 40 odstranit zleva. Která část obrázku se dostane do levého horního rohu? Bude to kousek: 10 shora, 40 zleva. Do pravého horního rohu se dostane 10 shora, 20 zprava. A tak dále.

Nejčastěji je obrázek symetrický (jako výše uvedené kosočtverce) a my potřebujeme odstranit stejné kousky na rohy. V takovém případě je uvedena jedna hodnota, která bude zadávat stejné posuny ze všech stran. Abychom odstranili oranžové kosočtverce, uvedeme slice jako 26 (protože oranžový kosočtverec má velikost 26px na 26px). Žluté kosočtverce se dostanou na linie ohraničení a stane se s nimi následující: buď se roztáhnou na celý blok, nebo se budou opakovat podél ohraničení (závisí na hodnotě 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;
}

Vlastnost border-image neumožňuje určit tloušťku ohraničení elementu. Prohlížeč jednoduše roztáhne obrázek podél ohraničení s již existující šířkou. Proto je třeba ji zadávat pomocí vlastnosti border.

Uživatelé starých prohlížečů (nebo s vypnutými obrázky) uvidí standardní rámec, zadaný v border, proto má smysl nastavit mu vhodný styl a barvu.

Hodnoty

Hodnota	Popis
url(Cesta k obrázku)	Cesta k obrázku. Podrobněji viz `border-image-source`.
posunuti	Udává prohlížeči, které části obrázku půjdou na rohy, a které na strany (a která část bude centrální). Možné hodnoty: od `1` do `4` čísel \| od `1` do `4` procent. Mezerou může být zadáno klíčové slovo `fill` navíc k číslům nebo procentům. Podrobněji viz `border-image-slice`.
tloustka	Vlastnost řídí šířku viditelné části rámečku, škáluje ji. Pokud je tato hodnota větší než šířka `border-width`, obrázek rámečku vleze pod obsah. Možné hodnoty: CSS jednotky \| procenta \| číslo \| `auto`. Podrobněji viz `border-image-width`.
odsazeni	Zajímavá vlastnost, umožňující odsunout rámeček za hranice elementu. Záporné hodnoty nejsou podporovány. Možné hodnoty: CSS jednotky (kromě % (?)) \| kladné číslo \| auto. Podrobněji viz `border-image-outset`.
opakovani	Udává, jak opakovat obrázek na hranicích (ne na rozích): vyplnit nebo roztáhnout. Možné hodnoty: `stretch` \| `repeat` \| `round` \| `space`. Podrobněji viz `border-image-repeat`.

Výchozí hodnota: none 100%/1/0 stretch (url(cesta k obrázku) posunuti/tloustka/odsazeni opakovani).

Pří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;
}

Pří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;
}

Příklad . border-image-repeat: hodnota round

Nyní je v normálním stavu nastavena hodnota repeat, a při najetí - round. Všimněte si, že před najetím se do ohraničení vejde ne celý počet kosočtverců, ale po najetí - 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;
}

Příklad . border-image-repeat: dvě slova

Hodnota repeat pro šířku a stretch pro 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;
}

Příklad . Shoda šířky obrázku se šířkou ohraničení

Zvýšíme border-width při najetí myší, přičemž tloušťku border-image necháme stejnou. Kosočtverce se roztáhnou na celé ohraničení:

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

Příklad . border-image-slice

Vezměme jiný obrázek, ve kterém jsou různé kousky nestejné:

Určíme, které části z obrázku je třeba odstranit - 25% 30% 10% 20%. Funguje to tak: 25% - odstup shora, 30% - odstup zprava, 10% - odstup zdola, 20% - odstup zleva. V podstatě těmito kousky odstraňujeme rohy. Horní levý roh bude 25% shora obrázku, a 20% zleva. Horní pravý roh bude 25% shora obrázku, a 30% zprava a tak dále.

Také, pokud najedete myší na blok, aktivuje se klíčové slovo fill, a centrální část obrázku se stane pozadím našeho 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;
}

Příklad

Vytvoříme přechodové ohraničení pomocí lineárního přechodu:

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

Příklad . border-image-width

Nastavíme hodnotu border-image-width na 2 (obrázek ohraničení se stane 2 krát větší než samotné ohraničení) při najetí myší na element (26/2 - uvedeno za lomítkem, přičemž 26 - je hodnota border-image-slice). Všimněte si, že samotné ohraničení se nezvětšilo, ale obrázek ohraničení - ano, protože vleze 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;
}

Příklad . border-image-outset

Nastavíme hodnotu border-image-outset na 3 při najetí myší na element. (26/1/2 - uvedeno za druhým lomítkem, přičemž 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;
}

Viz také

vlastnost border-image-source,
která zadává cestu k obrázku pro ohraničení
vlastnost border-image-slice,
která zadává rozdělení obrázku pro ohraničení
vlastnost border-image-repeat,
která zadává opakování obrázku pro ohraničení
vlastnost border-image-width,
která zadává velikost obrázku pro ohraničení
vlastnost border-image-outset,
která zadává posun obrázku pro ohraničení