Бордер-имаге - ЦСС-трикови

border-image је скраћено својство које вам омогућава да користите слику или ЦСС градијент као ивицу елемента.

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

border-imageИмовина може да се примени на било који елемент, осим унутрашњих елемената стола (нпр ру, ј, ТД) када border-collapseје подешен на collapse.

Својства

Једино потребно својство за border-imageстенографију је border-image-source. Остала својства подразумевано подразумевају почетне вредности ако нису наведена. Ово су border-imageсвојства по реду:

`border-image-source`

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

Ово својство наводи извор за граничну слику. То може бити УРЛ, УРИ података, градијент ЦСС-а или уграђени СВГ (иако је подршка ограничена за уграђени СВГ, погледајте напомене о употреби СВГ-а).

Почетна вредност је none.

`border-image-slice`

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

Вредности овог својства говоре прегледачу где да „исече“ слику да би створио делове обруба. Слика је подељена на 9 одељака - четири угла, четири стране и центар.

Осам срца у „оквирној“ слици, увећано за приказ детаља. Црвене линије означавају кришке.

Ако мислите да то звучи бесмислено, у добром сте друштву. Пре неколико година водила се дуга дискусија о тој теми на блогу Ерица Миера, где су одмеравали многи великани развоја фронта.

У овој демонстрацији срце се понавља око границе див-а. border-image-sourceСлика је композитни слика осам истог срца иконе, исечен тако да је пуна облик срца се користи на свакој страни елемента.

Погледајте демонстрацијску слику оловке оловке: Граница иконе помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПену

Додатне напомене о употреби

Иако се подршка за border-imageпобољшала - подржана је без префикса у свим тренутним верзијама прегледача - постављање резервног borderстила се и даље исплати. Резервна граница ће се приказати у прегледачима који не подржавају border-imageили ако слика не успе да се учита.

За разлику од неких других својстава обруба, border-imageне може се анимирати. Такође се не може стилизовати border-radius.

Ако пријавите ширину а border-image-sourceи borderширину или border-image-widthбез било каквих резова, цела слика без реза биће постављена на четири угла елемента, прилагођена вашој наведеној ширини.

Повезан

border
border-collapse
box-sizing

Више информација

border-image у ЦСС модулу позадине и граница ниво 3 ЦР
border-image на МДН
бордер-имаге.цом, овај алат вам омогућава да отпремите слику и играте се ивицама ивица док их не исправите, а затим генерише ЦСС за вас.
Слика на граници објашњена од Дудлеи Стореи-а.

Још демонстрација

Такође од Дудлеи Стореи-а, Практична гранична слика: одзивни оквир слике, демо ЦодеПен. Ово је добар пример разумне употребе обрубљене слике на одговарајућој слици. Приметите да се „оквир“ уклања код мањих величина екрана.
Тачне тачкасте ивице користећи СВГ и бордер-имаге, оловку Луцаса Лемонниера. Решење за ружну квадратну „тачкасту“ границу, овај метод вам даје праве округле тачке!
дугме за градијент, оловка корисника ЦодеПен-а ГССкГСС. Леп пример линеарног градијента као граничне слике.
Филмска трака, оловка Ницка Петтита. Можда није најпрактичнији демо, ово је забаван, умешан пример онога што можете учинити border-image.

Подршка прегледача

border-imageпрвобитно тражени префикси добављача у свим прегледачима који су га подржавали. Сада ради без префикса у најновијој верзији свих прегледача. У овој табели су приказани најранија префиксна подршка и најранија непрефиксирана подршка где је то могуће.