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-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

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

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

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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

Нотатка

Firefox до версии 15.0 поддерживает свойство -moz-border-image. Safari, Chrome до версии 15.0, Android и iOS поддерживают свойство -webkit-border-image. Opera до версии 15.0 поддерживает свойство -o-border-image.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-image	16.0	15.0	6.0	15.0	11.0

Підтримка: мобільні переглядачі

Переглядач
border-image	4.4	15.0	6.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="borderimg">Рамка зібрана з зображення з ромбами: нарізка по 30px, повторення round.</div>

#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;
}