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

Властивість border-image-width визначає ширину зображення заданого для межі елементу, встановлюючи внутрішні відступи від країв меж. Якщо значення border-image-width більше, ніж значення border-width, тоді зображення виходить за краї полів або вмісту елементу.

border-image-width використовується разом з такими властивостями як border-image-source, border-image-repeat, border-image-outset та border-image-slice для стилізування меж елементів.

Значення без задання - 1, тому, якщо значення не встановлено, але для елемента є визначення кордону або ширини кордону, зображення буде намальовано з такою шириною.

правити

Порада

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

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

Порада

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

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

Нотатка

Чотири значения border-image-width вказують на зміщення, які використовуються для розділення зображення границі на девять частин. Вони представляють внутрішні відстані від верхньої, правої, нижньої та лівої сторони області зображення. Якщо четверте значення пропущено, воно встановлюється рівним другому. Якщо третя значення також пропущено, воно встановлюється рівним першому. Якщо и друге значение не вказано, тоді воно береться рівним первошу. Негативні значення не припустимі для будь-яких значень border-image-width.

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

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

Синтаксис

border-image-width: number|%|length|auto|initial|inherit;

Властивість border-image-width може отримувати 6 значень:

number

Ширина кордону в пікселях.

автор: Svitlana

правити

%

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

автор: Svitlana

правити

length

Ширина у пікселях.

автор: Svitlana

правити

auto

Ширина відповідно ширині нарізаних зображень.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

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

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

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

Мобільних переглядачів ще не додано.

Приклади

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

<div class="box">border-image-width: 12px</div>
<div class="box wide">border-image-width: 24px</div>

.box {
    margin-bottom: 12px;
    padding: 16px;
    border: 12px solid transparent;
    border-image-source: 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");
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-width: 12px;
}

.wide {
    border-image-width: 24px;
}