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, тому, якщо значення не встановлено, але для елемента є визначення кордону або ширини кордону, зображення буде намальовано з такою шириною.
- Порада
-
Щоб зекономити час, рекомендується використовувати
автор: Svitlanaborder-imageдля встановлення всіх властивостей для зображення межі одним правилом. - Порада
-
Зверніть увагу,
автор: Svitlanaborder-imageвикористовується замістьborder-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або дляborder-imageвстановлене значення none. - Нотатка
-
Чотири значения
автор: Svitlanaborder-image-widthвказують на зміщення, які використовуються для розділення зображення границі на девять частин. Вони представляють внутрішні відстані від верхньої, правої, нижньої та лівої сторони області зображення. Якщо четверте значення пропущено, воно встановлюється рівним другому. Якщо третя значення також пропущено, воно встановлюється рівним першому. Якщо и друге значение не вказано, тоді воно береться рівним первошу. Негативні значення не припустимі для будь-яких значеньborder-image-width.
Синтаксис
border-image-width: number|%|length|auto|initial|inherit;Властивість border-image-width може отримувати 6 значень:
-
number -
Ширина кордону в пікселях.
автор: Svitlana -
% -
Ширина у відсотках по відношенню до висоти та ширині зображення для кордону.
автор: Svitlana -
length -
Ширина у пікселях.
автор: Svitlana -
auto -
Ширина відповідно ширині нарізаних зображень.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 1 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageWidth="20px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 16 | 13 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 14 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Ширина намальованої рамки-зображення не зобов'язана збігатися з шириною бордера: у другому блоці вона вдвічі більша й насувається на вміст.
HTML
<div class="box">border-image-width: 12px</div>
<div class="box wide">border-image-width: 24px</div>CSS
.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;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!