CSS Зображення межі
CSS Зображення в якості межі елемента
За допомогою CSS властивості border-image ви можете встановити зображення, яке буде використовуватись як межа навколо елемента.
CSS властивість border-image
CSS властивість border-image дозволяє визначити зображення, яке буде використовуватись замість звичної рамки навколо елемента.
Ця властивість має три частини:
- Зображення для використання в якості межі
- Де нарізати зображення
- Визначення, чи повинні середні секції повторюватись або розтягуватись
Ми будемо використовувати наступне зображення (називається "border.png"):
Властивість border-image бере зображення і розбиває його на дев’ять частин, як хрестики-нолики. Потім воно розміщує кути по кутам, а середні ділянки повторюються або розтягуються, як ви вкажете.
Примітка: Для того, щоб працював border-image, елементу також необхідно встановити властивість border!
Тут середні ділянки зображення повторюються для створення меж:
Зображення як межа!
Ось код:
Приклад
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Спробуйте самі »
Тут середні ділянки зображення розтягуються для створення межі:
Зображення як межа!
Ось код:
Приклад
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
Спробуйте самі »
Порада: Властивість border-image насправді є скороченою властивістю для властивостей border-image-source, border-image-slice, border-image-width, border-image-outset та border-image-repeat.
CSS border-image - Різні значення зрізу
Різні значення зрізу повністю змінюють зовнішній вигляд межі:
Приклад 1:
border-image: url(border.png) 50 round;
Приклад 2:
border-image: url(border.png) 20% round;
Приклад 3:
border-image: url(border.png) 30% round;
Ось код:
Приклад
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Спробуйте самі »
Перевірте себе за допомогою вправ!
CSS Властивості зображень в якості меж
| Властивості | Опис |
|---|---|
| border-image | Скорочена властивість для встановлення всіх властивостей border-image-* |
| border-image-source | Визначає шлях до зображення, яке буде використовуватись в якості межі |
| border-image-slice | Визначає, як нарізати зображення межі |
| border-image-width | Визначає ширину межі зображення |
| border-image-outset | Визначає величину, на яку область зображення межі виходить за межі блоку |
| border-image-repeat | Визначає, чи повинно зображення межі повторюватись, округлятись або розтягуватись |
