Граница-изображение - CSS-хитрости

border-image - это сокращенное свойство, позволяющее использовать изображение или градиент CSS в качестве границы элемента.

.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); )

Это свойство определяет источник изображения границы. Это может быть 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: icon border от CSS-Tricks (@ css-tricks) на CodePen.

Дополнительные примечания по использованию

Хотя поддержка для border-imageулучшена - она поддерживается без префиксов во всех текущих версиях браузеров - установка резервного borderстиля все еще имеет смысл. Ваша резервная граница будет отображаться в браузерах, которые не поддерживают ее border-image, или если изображение не загружается.

В отличие от некоторых других свойств границы, border-imageне может быть анимирован. Его также нельзя стилизовать border-radius.

Если вы объявите a border-image-sourceи borderwidth или border-image-widthбез каких-либо срезов, все неразрезанное изображение будет размещено в четырех углах элемента с масштабированием до указанной вами ширины.

Связанный

border
border-collapse
box-sizing

Дополнительная информация

border-image в модуле CSS Background and Borders, уровень 3 CR
border-image в MDN
border-image.com, этот инструмент позволяет загружать изображение и играть с фрагментами границы, пока вы не получите их правильные, а затем он сгенерирует для вас CSS.
Объяснение изображения границы от Дадли Стори.

Больше демонстраций

Также от Дадли Стори, Практическое изображение границы: отзывчивая рамка для фотографий, демонстрация CodePen. Это хороший пример разумного использования изображения границы на адаптивном изображении. Обратите внимание, что «рамка» удаляется при меньшем размере экрана.
Истинные точечные границы с использованием SVG и изображения границы, ручка Лукаса Лемонье. Решение для уродливой квадратной «пунктирной» границы, этот метод дает вам настоящие круглые точки!
кнопка градиента, ручка от пользователя CodePen GSSxGSS. Прекрасный пример линейного градиента в качестве изображения границы.
Кинопленка, ручка Ника Петтита. Возможно, это не самая практичная демонстрация, это забавный художественный пример того, что вы можете сделать border-image.

Поддержка браузера

border-imageизначально требовались префиксы поставщика для всех поддерживающих его браузеров. Теперь он работает без префиксов в последней версии всех браузеров. В этой таблице показаны как самая ранняя поддержка с префиксом, так и самая ранняя поддержка без префикса, где это применимо.