Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
11.0 + | 7.0 + | 15.0 + | 10.5 + | 15.0 + | 3.0 + | 3.5 + | 15 + | 2.1 + | 1.0 + |
Коротка інформація
Значення за умовчанням | none |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів, за винятком тих, у кого border-collapse заданий як collapse |
Відсотковий запис | незастосовні |
Посилання на специфікацію | http://www.w3.org/TR/css3-background/#border-images |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Використовується для відображення мальованої рамки вокру елемента. Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. При інших значеннях border малюнок завжди має пріоритет. Фон, якщо він заданий через властивість background, відображається під рамкою.
Синтаксис
border-image: none | [<URL> [<число> | <відсотки> ] {1,4} [/<товщина> {1,4}]? ] && [Stretch | repeat | round] {0,2}
Значення
- none
- Чи не відображає мальовану рамку, використовується встановлений стиль межі.
- URL
-
Шлях до графічного файлу. Обов'язковий параметр.
Саме зображення для створення рамки продемонстровано на рис. 1 і складається з дев'яти областей: чотирьох куточків, верхній, правій, нижній, лівого боку і центральної частини, в якій виводиться вміст елемента.
Рис. 1. Зображення для створення рамки
- <число>
-
Одне, два, три або чотири значення, які вказують розміри частин зображення в пікселях, задаючи тим самим області ділення. Самі одиниці не пишуться, тільки число (10, а не 10px). На рис. 2 червоними лініями виділені необхідні для створення рамки області.
Рис. 2. Розподіл вихідного зображення на області
Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості значень і приведений в табл. 1.
Табл. 1. Залежність від числа значень Число значень Результат 1 встановлює межі однакової товщини на кожній стороні малюнка. 2 Перше значення встановлює висоту верхньої і нижньої межі, друге — лівої і правої. 3 Перше значення визначає висоту верхньої межі, друге — лівої і правої, а третє — висоту нижньої межі. 4 По черзі встановлюється розміри верхньої, правої, нижньої і лівої межі. - <відсотки>
- Аналогічно <числу> , але значення задаються у відсотках. Той або інший параметр обов'язковий.
- <товщина>
- Через слеш пишеться одне, два, три або чотири значення товщини межі на кожній стороні елемента. Є аналогом border-width і використовує той же синтаксис.
- stretch
- розтягує малюнок межі до розмірів елемента. Це значення використовується за умовчанням.
- repeat
- Повторює малюнок межі.
- round
- Повторює малюнок і масштабує його так, щоб на стороні елемента виявилося ціле число зображень.
Вплив цих параметрів на вигляд рамки показано на рис. 3.
stretch | repeat | round |
Рис. 3. Результат використання параметрів stretch, repeat і round
Приклад
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> border-image </title> <style> div { border: 30px solid #40c4c8; padding: 20px; -moz-border-image: url(images/bg-image.png) 30 round round; -webkit-border-image: url(images/bg-image.png) 30 round round; -o-border-image: url(images/bg-image.png) 30 round round; border-image: url(images/bg-image.png) 30 round round; } </style> </head> <body> <div> Вітраж являє собою композицію зроблену з безлічі кольорових стекол обрамлених дротом і найбільш ефектно виглядає при проходженні через нього сонячного або штучного світла. </div> </body> </html>
Результат прикладу показаний на рис. 1.
Браузери
Firefox до версії 15.0 підтримує властивість - moz-border-image .
Safari, Chrome до версії 15.0, Android і iOS підтримують властивість - webkit-border-image .
Opera до версії 15.0 підтримує властивість -o-border-image .