css властивість border-image-source
Властивість border-image-source використовується для визначення розташування зображення, яке буде використано для стилізування межі елементу.
Це може бути URL-адреса, URI-дані, градієнт CSS або вбудований SVG.
border-image-source використовується разом з такими властивостями як border-image-slice, border-image-repeat, border-image-outset та border-image-width для стилізування меж елементів.
- Порада
-
Щоб зекономити час, рекомендується використовувати
автор: Svitlanaborder-imageдля встановлення всіх властивостей для зображення межі одним правилом. - Порада
-
Зверніть увагу,
автор: Svitlanaborder-imageвикористовується замістьborder-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або дляborder-imageвстановлене значення none.
Синтаксис
border-image-source: none|image|initial|inherit;Властивість border-image-source може отримувати 4 значень:
-
none -
Не використовувати зображення.
автор: Svitlana -
image -
Шлях до зображення
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageSource="url(border.png)" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 15 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
border-image-source вказує саме зображення для рамки; як його різати й повторювати — справа border-image-slice та border-image-repeat.
HTML
<div class="box">Джерело рамки — svg із ромбами.</div>CSS
.box {
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;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!