Granična slika - CSS-trikovi

border-image je stenografsko svojstvo koje vam omogućuje upotrebu slike ili CSS gradijenta kao obruba elementa.

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

border-imageSvojstvo može se primijeniti na bilo koji element, osim unutarnjih elemenata stol (npr tr, th, td), kad border-collapseje postavljen u collapse.

Svojstva

Jedino potrebno svojstvo border-imagestenografije je border-image-source. Ostala svojstva zadana su na početne vrijednosti ako nisu navedena. Ovo su border-imagesvojstva po redu:

`border-image-source`

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

Ovo svojstvo navodi izvor za rubnu sliku. To može biti URL, URI podataka, gradijent CSS-a ili umetnuti SVG (premda je podrška ograničena za ugrađeni SVG, pogledajte Bilješke o upotrebi SVG-a).

Početna vrijednost je none.

`border-image-slice`

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

Vrijednosti ovog svojstva govore pregledniku gdje da "nareže" sliku da bi stvorio dijelove obruba. Slika je podijeljena u 9 dijelova - četiri kuta, četiri strane i središte.

Osam srca na "okvirnoj" slici, uvećano za prikaz detalja. Crvene crte označavaju kriške.

Ako mislite da to zvuči besmisleno, u dobrom ste društvu. Dugo se raspravljalo o toj temi na blogu Erica Myera prije nekoliko godina, gdje su odmjerili mnogi velikani sučelja u razvoju.

U ovoj demonstraciji srce se ponavlja oko granice div-a. border-image-sourceSlika je kompozitna slika osam iste ikone srca, narezane tako da puni srce oblik se koristi na svakoj strani elementa.

Pogledajte demonstracijsku sliku olovke olovke: Granica ikone pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Više napomena o upotrebi

Iako se podrška za border-imagepoboljšala - podržana je bez prefiksa u svim trenutnim verzijama preglednika - postavljanje rezervnog borderstila još uvijek se isplati. Rezervna granica prikazat će se u preglednicima koji ne podržavaju border-imageili ako se slika ne učita.

Za razliku od nekih drugih svojstava obruba, border-imagene može se animirati. Također se ne može oblikovati border-radius.

Ako prijavite a border-image-sourcei borderširinu ili border-image-widthbez ikakvih kriški, cijela slika bez reza postavit će se na četiri ugla elementa, skalirana na vašu navedenu širinu.

Povezano

border
border-collapse
box-sizing

Više informacija

border-image u CSS modulu za pozadinu i granice razine 3 CR
border-image na MDN
border-image.com, ovaj alat vam omogućuje prijenos slike i igranje s graničnim rezovima dok ih ne ispravite, a zatim generira CSS za vas.
Granična slika objašnjena iz Dudley Storeya.

Više demonstracija

Također od Dudley Storeyja, Praktična granična slika: responzivni okvir slike, demo CodePen. Ovo je dobar primjer razumne upotrebe obrubljene slike na responzivnoj slici. Primijetite da se "okvir" uklanja kod manjih veličina zaslona.
Istinite točkaste granice pomoću SVG-a i border-image-a, olovke Lucasa Lemonniera. Rješenje za ružni kvadratni "točkasti" obrub, ova metoda daje vam prave okrugle točke!
gumb za gradijent, olovka korisnika CodePena GSSxGSS. Lijep primjer linearnog gradijenta kao rubne slike.
Filmska traka, olovka Nicka Pettita. Možda nije najpraktičniji demo, ovo je zabavan, umjetnički primjer onoga što možete učiniti border-image.

Podrška preglednika

border-imageizvorno tražili prefikse dobavljača u svim preglednicima koji su ga podržavali. Sada radi bez prefiksa u najnovijoj verziji svih preglednika. Ova tablica prikazuje i najraniju potporu s prefiksom i najraniju potporu bez prefiksa, gdje je to primjenjivo.