Hraniční obrázek - Triky CSS

border-image je zkratková vlastnost, která vám umožní použít obrázek nebo přechod CSS jako ohraničení prvku.

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageVlastnost lze aplikovat na jakoukoli část, s výjimkou vnitřních prvků tabulky (např tr, th, td), pokud border-collapseje nastavena na hodnotu collapse.

Vlastnosti

Jedinou požadovanou vlastností pro border-imagezkratku je border-image-source. Ostatní vlastnosti mají výchozí výchozí hodnoty, pokud nejsou zadány. Toto jsou border-imagevlastnosti v pořadí:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Tato vlastnost určuje zdroj obrázku ohraničení. Může to být adresa URL, datový identifikátor URI, přechod CSS nebo vložený SVG (ačkoli pro vložený SVG je podpora omezená, viz poznámky k použití SVG).

Počáteční hodnota je none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Hodnoty této vlastnosti sdělují prohlížeči, kam má „rozdělit“ obraz, aby vytvořil části ohraničení. Obrázek je rozdělen do 9 částí - čtyři rohy, čtyři strany a střed.

Osm srdcí v „rámečkovém“ obrázku, zvětšených pro zobrazení detailů. Červené čáry označují řezy.

Pokud si myslíte, že to zní absurdně, jste v dobré společnosti. Před několika lety proběhla na blogu Erica Myera dlouhá diskuse o tomto tématu, kde se vážilo mnoho velikánů frontendového vývoje.

V této ukázce se srdce opakuje kolem hranice div. border-image-sourceObraz je složený obraz z osmi stejné ikony srdce, plátky tak, že plný tvar srdce se používá na každé straně prvku.

Podívejte se na ukázku Pen border-image: icon border by CSS-Tricks (@ css-tricks) na CodePen.

Další poznámky k použití

Ačkoli se podpora pro border-imagevylepšila - je podporována bez předpony ve všech současných verzích prohlížeče - nastavení záložního borderstylu stále stojí za to. Vaše záložní ohraničení se zobrazí v prohlížečích, které nepodporují border-image, nebo pokud se obrázek nenačte.

Na rozdíl od některých dalších vlastností ohraničení border-imagenelze animovat. Také to nelze stylovat border-radius.

Pokud deklarujete šířku border-image-sourcea a bordernebo border-image-widthbez jakýchkoli řezů, celý neřezaný obrázek bude umístěn ve čtyřech rozích prvku, zmenšen na zadanou šířku.

Příbuzný

border
border-collapse
box-sizing

Více informací

border-image v modulu CSS Pozadí a hranice úrovně 3 ČR
border-image ve společnosti MDN
border-image.com, tento nástroj vám umožní nahrát obrázek a hrát si s hraničními řezy, dokud je nedostanete správně, pak vám vygeneruje CSS.
Border Image vysvětlil Dudley Storey.

Další ukázky

Také od Dudley Storey, Praktický okrajový obrázek: citlivý rámeček obrázku, ukázka CodePen. Toto je dobrý příklad rozumného použití okrajového obrázku na responzivním obrázku. U menších velikostí obrazovky je „rámeček“ odstraněn.
Skutečné tečkované hranice pomocí SVG a obrázku hranice, pero od Lucase Lemonniera. Řešení ošklivého čtvercového „tečkovaného“ ohraničení, tato metoda vám poskytne skutečné kulaté tečky!
tlačítko s přechodem, pero od uživatele CodePen GSSxGSS. Pěkný příklad lineárního přechodu jako obrázku hranice.
Filmový pás, pero Nick Pettit. Možná ne nejpraktičtější ukázka, toto je zábavný, umělecký příklad toho, s čím můžete dělat border-image.

Podpora prohlížeče

border-imagepůvodně požadované předpony dodavatele ve všech prohlížečích, které ji podporovaly. Nyní funguje v nejnovější verzi všech prohlížečů bez opravy. Tato tabulka ukazuje jak nejstarší předponovanou podporu, tak nejstarší nepředponovanou podporu, pokud existuje.