css властивість border-image


border-image - це одна з властивостей, яка була введена у CSS3 для можливості використання зображення як межі елементу.

Властивість `border-image`

border-image використовується для скороченого запису таких властивостей як border-image-source, border-image-slice, border-image-width, border-image-outset, і border-image-repeat. Це ефективний метод, щоб додати зображення для рамки.

Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. При інших значеннях властивості border малюнок завжди має пріоритет.

Одночасно можна задати наступні властивості:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Якщо не вказати якесь значення, то браузер встановить це значення в значення без задання.

Також підтримуються градієнти CSS будь-якого типу

Хоча підтримка border-image браузерами і покращилася, все-таки варто встановлювати стиль резервного кордону для елементу, який з'явиться в веб-переглядачах, які не підтримують border-image, або якщо зображення не завантажиться.

На відміну від деяких інших властивостей, які встановлюють кордон для елементів, border-image не може бути анімованим. Вона також не може стилізувати кордон разом з використанням заокруглення, тобто властивістю border-radius.

Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості значень і приведений в таблиці.

Число значень Результат
1 Задає колір кордону для всіх сторін.
2 Перше значення задає колір для верхнього та нижнього кордону, друге - для лівого та правого.
3 Перше значення задає колір для верхнього кордону, друге - для лівого та правого, останнє - для нижнього кордону.
4 По черзі встановлює колір для верхнього, правого, нижнього та лівого кордонів.
Нотатка:

Якщо задано тло через властивість background, то він відображається під рамкою.

Порада:

Зверніть увагу, border-image використовується замість border-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або для border-image встановлене значення none.

Нотатка:

Firefox до версии 15.0 поддерживает свойство -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

Шлях до зображення, яке буде використано в якості кордону.

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; 


}

Додаткові посилання