css властивість border-image
border-image - це одна з властивостей, яка була введена у CSS3 для можливості використання зображення як межі елементу.
border-image використовується для скороченого запису таких властивостей як border-image-source, border-image-slice, border-image-width, border-image-outset, і border-image-repeat. Це ефективний метод, щоб додати зображення для рамки.
Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. При інших значеннях властивості border малюнок завжди має пріоритет.
Одночасно можна задати наступні властивості:
border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat
Якщо не вказати якесь значення, то браузер встановить це значення в значення без задання.
Також підтримуються градієнти CSS будь-якого типу
Хоча підтримка border-image браузерами і покращилася, все-таки варто встановлювати стиль резервного кордону для елементу, який з'явиться в веб-переглядачах, які не підтримують border-image, або якщо зображення не завантажиться.
На відміну від деяких інших властивостей, які встановлюють кордон для елементів, border-image не може бути анімованим. Вона також не може стилізувати кордон разом з використанням заокруглення, тобто властивістю border-radius.
Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості значень і приведений в таблиці.
| Число значень | Результат |
|---|---|
| 1 | Задає колір кордону для всіх сторін. |
| 2 | Перше значення задає колір для верхнього та нижнього кордону, друге - для лівого та правого. |
| 3 | Перше значення задає колір для верхнього кордону, друге - для лівого та правого, останнє - для нижнього кордону. |
| 4 | По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів. |
| Нотатка: | Якщо задано тло через властивість |
| Порада: | Зверніть увагу, |
| Нотатка: | Firefox до версии 15.0 поддерживает свойство |
Синтаксис
border-image: source slice width outset repeat|initial|inherit && stretch|repeat|round;Властивість border-image може отримувати 10 значень:
border-image-sourceШлях до зображення, яке буде використано в якості кордону.
border-image-sliceЯк нарізати зображення для кордону.
border-image-widthШирина кордону.
border-image-outsetВизначає на яку величину може виходити зображення за межі кордону блоку.
border-image-repeatЯк буде повторюватися зображення
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
stretchРозтягує малюнок кордону до розмірів елемента. Це значення використовується за умовчанням.
repeatПовторює малюнок кордону.
roundПовторює малюнок і масштабує його так, щоб на стороні елемента виявилося ціле число зображень.
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImage="url(border.png) 30 round" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-image | 16.0 |
11.0 |
15.0 |
6.0 |
15.0 |
| Переглядач | |||
|---|---|---|---|
| border-image | 4.4 |
15.0 |
6.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Вказує зображення в якості границі
#borderimg {
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}