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 | По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів. |
- Порада
-
Зверніть увагу,
автор: Svitlanaborder-imageвикористовується замістьborder-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або дляborder-imageвстановлене значення none. - Нотатка
-
Якщо задано тло через властивість
автор: Svitlanabackground, то він відображається під рамкою. - Нотатка
-
Firefox до версии 15.0 поддерживает свойство
автор: Svitlana-moz-border-image. Safari, Chrome до версии 15.0, Android и iOS поддерживают свойство-webkit-border-image. Opera до версии 15.0 поддерживает свойство-o-border-image.
Синтаксис
border-image: source slice width outset repeat|initial|inherit && stretch|repeat|round;Властивість border-image може отримувати 10 значень:
-
border-image-source -
Шлях до зображення, яке буде використано в якості кордону.
автор: Svitlana -
border-image-slice -
Як нарізати зображення для кордону.
автор: Svitlana -
border-image-width -
Ширина кордону.
автор: Svitlana -
border-image-outset -
Визначає на яку величину може виходити зображення за межі кордону блоку.
автор: Svitlana -
border-image-repeat -
Як буде повторюватися зображення
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana -
stretch -
Розтягує малюнок кордону до розмірів елемента. Це значення використовується за умовчанням.
автор: Svitlana -
repeat -
Повторює малюнок кордону.
автор: Svitlana -
round -
Повторює малюнок і масштабує його так, щоб на стороні елемента виявилося ціле число зображень.
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImage="url(border.png) 30 round" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 16 | 15 | 6 | 11 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Замість звичайної рамки — зображення: воно ріжеться на дев'ять частин по 30 пікселів, кути стають кутами рамки, а сторони повторюються цілим числом разів (round). Бордер мусить мати товщину — тому border: 12px solid transparent.
HTML
<div id="borderimg">Рамка зібрана з зображення з ромбами: нарізка по 30px, повторення round.</div>CSS
#borderimg {
padding: 16px;
border: 12px solid transparent;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%230172ad'%3E%3Cpath d='M15 0l15 15-15 15L0 15z'/%3E%3Cpath d='M45 0l15 15-15 15-15-15z'/%3E%3Cpath d='M75 0l15 15-15 15-15-15z'/%3E%3Cpath d='M15 30l15 15-15 15L0 45z'/%3E%3Cpath d='M75 30l15 15-15 15-15-15z'/%3E%3Cpath d='M15 60l15 15-15 15L0 75z'/%3E%3Cpath d='M45 60l15 15-15 15-15-15z'/%3E%3Cpath d='M75 60l15 15-15 15-15-15z'/%3E%3C/g%3E%3C/svg%3E") 30 round;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!