Кордон-зображення - 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: 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 Background and Borders Level 3 CR
border-image на MDN
border-image.com, цей інструмент дозволяє завантажувати зображення та грати з нарізаними обрізами, поки ви не правильно їх зрозумієте, тоді він генерує CSS для вас.
Зображення на кордоні пояснено Дадлі Сторі.

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

Також від Дадлі Сторі, Практична рамка-зображення: адаптивна рамка для зображення, демонстрація CodePen. Це хороший приклад використання розумного зображення на чуйному зображенні. Зверніть увагу, що "кадр" видаляється при менших розмірах екрана.
Справжні пунктирні межі з використанням SVG та border-image, ручка Лукаса Лемоньє. Рішення для потворної квадратної «пунктирної» межі, цей метод дає вам справжні круглі крапки!
кнопка градієнта, ручка користувача CodePen GSSxGSS. Гарний приклад лінійного градієнта як зображення кордону.
Кінострічка, ручка Ніка Петтіта. Мабуть, не сама практична демонстрація, це веселий, вигадливий приклад того, з чим можна впоратися border-image.

Підтримка браузера

border-imageспочатку потрібні префікси постачальників у всіх браузерах, які його підтримували. Зараз він працює без префіксу в останній версії всіх браузерів. У цій таблиці наведено як найранішу префіксну підтримку, так і найранішу безпрефіксну підтримку, де це можливо.