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

cssselektor {
  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):

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

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

Результат:

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

css#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

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

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

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

css#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

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

css#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:

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

css#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:

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

css#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í:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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é