Hraničný obrázok - Triky CSS

border-image je skratková vlastnosť, ktorá vám umožní použiť obrázok alebo prechod CSS ako hranicu prvku.

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

border-imageVlastnosť možno aplikovať na akúkoľvek časť, s výnimkou vnútorných prvkov tabuľky (napr tr, th, td), ak border-collapseje nastavená na hodnotu collapse.

Vlastnosti

Jedinou požadovanou vlastnosťou pre border-imageskratku je border-image-source. Ostatné vlastnosti majú predvolené pôvodné hodnoty, ak nie sú zadané. Toto sú border-imagevlastnosti v poradí:

`border-image-source`

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

Táto vlastnosť určuje zdroj obrázka orámovania. Môže to byť adresa URL, identifikátor URI údajov, prechod CSS alebo vložený SVG (aj keď podpora je obmedzená pre vložený SVG, pozri poznámky k použitiu SVG).

Počiatočná hodnota je none.

`border-image-slice`

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

Hodnoty tejto vlastnosti informujú prehľadávač, kam má obrázok „rozdeliť“, aby vytvoril kúsky ohraničenia. Obrázok je rozdelený na 9 častí - štyri rohy, štyri strany a stred.

Osem sŕdc na obrázku „rámu“, zväčšených, aby sa zobrazili detaily. Červené čiary označujú rezy.

Ak si myslíte, že to znie absurdne, ste v dobrej spoločnosti. Pred niekoľkými rokmi sa na blogu Erica Myera dlho diskutovalo o tejto téme, kde zavážilo veľa popredných vývojových velikánov.

V tejto ukážke sa srdce opakuje okolo hranice div. border-image-sourceObraz je zložený obraz z ôsmich rovnakej ikony srdce, plátky tak, že plný tvar srdca sa používa na každej strane prvku.

Pozrite si ukážku obrázka border border-image: ohraničenie ikony pomocou CSS-Tricks (@ css-tricks) na CodePen.

Ďalšie poznámky k použitiu

Aj keď border-imagesa vylepšila podpora pre - je podporovaná bez predvoľby vo všetkých súčasných verziách prehľadávača - nastavenie záložného borderštýlu je stále užitočné. Vaše záložné ohraničenie sa zobrazí v prehľadávačoch, ktoré nepodporujú border-image, alebo ak sa obrázok nepodarí načítať.

Na rozdiel od niektorých ďalších vlastností ohraničenia border-imagesa nedá animovať. Tiež sa to nedá štylizovať border-radius.

Ak deklarujete šírku border-image-sourcea a borderalebo border-image-widthbez akýchkoľvek rezov, celý nekreslený obrázok sa umiestni do štyroch rohov prvku v mierke so zadanou šírkou.

Súvisiace

border
border-collapse
box-sizing

Viac informácií

border-image v module CSS Pozadie a hranice úrovne 3 ČR
border-image na MDN
border-image.com, tento nástroj vám umožní nahrať obrázok a hrať sa s hraničnými rezmi, kým ich nedosiahnete správne. Potom za vás vygeneruje CSS.
Obrázok na okraji vysvetlený od Dudleyho Storeyho.

Ďalšie ukážky

Tiež od Dudleyho Storeyho, Praktický okrajový obraz: responzívny rám obrazu, ukážka CodePen. Toto je dobrý príklad rozumného použitia okrajového obrázka na responzívnom obrázku. Upozorňujeme, že pri menších veľkostiach obrazovky je „rám“ odstránený.
Skutočne bodkované okraje pomocou SVG a obrázka, Pen od Lucasa Lemonniera. Táto metóda je riešením pre škaredý štvorcový „bodkovaný“ okraj, vďaka ktorému získate skutočné okrúhle bodky!
tlačidlo prechodu, pero od používateľa CodePen GSSxGSS. Pekný príklad lineárneho gradientu ako obrázku hranice.
Filmový pás, pero, Nick Pettit. Možno to nie je najpraktickejšie ukážka, toto je zábavný, umelecký príklad toho, čo môžete robiť border-image.

Podpora prehľadávača

border-imagepôvodne požadované predpony dodávateľa vo všetkých prehľadávačoch, ktoré ju podporovali. Teraz to v najnovšej verzii všetkých prehľadávačov funguje bez opravy. Táto tabuľka zobrazuje najskoršiu predponovanú podporu a najskoršiu predponovanú podporu, kde je to vhodné.