Граница-изображение - CSS-трикове

border-image е стенографско свойство, което ви позволява да използвате изображение или CSS градиент като граница на елемент.

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

В border-imageимота може да се приложи към всеки елемент, с изключение на вътрешните елементи на маса (напр TR, ти, TD), когато border-collapseе настроен да collapse.

Имоти

Единственото задължително свойство за border-imageстенографията е border-image-source. Другите свойства по подразбиране са първоначалните им стойности, ако не са посочени. Това са border-imageсвойствата по ред:

`border-image-source`

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

Това свойство указва източника за граничното изображение. Това може да бъде URL, URI на данни, CSS градиент или вграден SVG (въпреки че поддръжката е ограничена за вграден SVG, вижте бележките за използване на SVG).

Началната стойност е none.

`border-image-slice`

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

Стойностите на това свойство казват на браузъра къде да „нарязва“ изображението, за да създаде парчетата от границата. Изображението е разделено на 9 секции - четирите ъгъла, четирите страни и центъра.

Осем сърца в „рамково“ изображение, уголемени, за да покажат детайли. Червените линии означават резени.

Ако смятате, че това звучи нелепо, вие сте в добра компания. Имаше продължителна дискусия по темата в блога на Ерик Майер преди няколко години, където много велики разработчици на фронтенд претегляха.

В тази демонстрация сърце се повтаря около границата на div. На border-image-sourceкартинката е съставно изображение на осем от същия сърце иконата, нарязани, така че пълно сърце форма се използва от всяка страна на елемента.

Вижте демонстрацията на Pen border-image: border icon by CSS-Tricks (@ css-tricks) на CodePen.

Още бележки за употреба

Въпреки че поддръжката за се border-imageе подобрила - поддържа се без префикс във всички текущи версии на браузъра - задаването на резервен borderстил все още си заслужава. Вашата резервна граница ще се покаже в браузъри, които не поддържат border-image, или ако изображението не успее да се зареди.

За разлика от някои други свойства на границата, border-imageне може да бъде анимиран. Също така не може да се стилизира border-radius.

Ако декларирате a border-image-sourceи borderширина или border-image-widthбез резени, цялото неразрязано изображение ще бъде поставено в четирите ъгъла на елемента, мащабирано до зададената от вас ширина.

Свързани

border
border-collapse
box-sizing

Повече информация

border-image в CSS модул за фон и граници Ниво 3 CR
border-image на MDN
border-image.com, този инструмент ви позволява да качвате изображение и да играете с граничните резени, докато не ги постигнете правилно, след което генерира CSS за вас.
Изображение на граница, обяснено от Dudley Storey.

Още демонстрации

Също така от Дъдли Стори, Практична граница-изображение: отзивчива рамка за картина, демонстрация на CodePen. Това е добър пример за разумно използване на гранично изображение върху отзивчиво изображение. Забележете, че „рамката“ се премахва при по-малки размери на екрана.
Истински пунктирани граници, използващи SVG и border-image, писалка от Lucas Lemonnier. Решение за грозната квадратна "пунктирана" граница, този метод ви дава истински кръгли точки!
бутон за градиент, писалка от потребител на CodePen GSSxGSS. Прекрасен пример за линеен градиент като гранично изображение.
Филмова лента, писалка от Ник Петит. Може би не най-практичната демонстрация, това е забавен, изкусен пример за това с какво можете да правите border-image.

Поддръжка на браузър

border-imageпървоначално се изискваха префикси на доставчици във всички браузъри, които го поддържаха. Сега тя работи без префикс в най-новата версия на всички браузъри. Тази таблица показва както най-ранната префиксирана поддръжка, така и най-ранната непредфиксирана поддръжка, където е приложимо.