Використовується для відображення рамки навколо елемента. Товщина рамки визначається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. За інших значень border малюнок завжди має пріоритет. Фон, якщо він заданий через властивість background, відображається під рамкою.
Коротка інформація
| Значення за замовчуванням | none |
|---|---|
| Наслідує | Ні |
| Застосовується | До всіх елементів, за винятком тих, у кого border-collapse заданий як collapse |
| Анімується | Ні |
Синтаксис
<code>bor der-image: none | [ <адреса> [<число> | <відсотки>]{1,4}
[/<товщина>{1,4}]? ] && [Stretch | Repeat | round]{0,2} Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- none
- Не відображає мальовану рамку, використовується встановлений стиль кордону.
- <адреса>
- Шлях до графічного файлу. Обов'язковий параметр.
Саме зображення для створення рамки продемонстровано на рис. 1 і складається з дев'яти областей: чотирьох куточків, верхньої, правої, нижньої, лівої сторони та центральної частини, в якій виводиться вміст елемента.
Мал. 1. Зображення для створення рамки
- <число>
Одне, два, три або чотири значення, які вказують розміри частин зображення в пікселях, задаючи тим самим області розподілу. Самі одиниці не пишуться, тільки число (10, а не 10px). На рис. 2 червоними лініями виділені необхідні для створення рамки області. images/css/css_border-image-2.png" alt="Поділ вихідного зображення на області" width="141" height="143">
Мал. 2. Поділ вихідного зображення на області
Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень та наведено в табл. 1.
Табл. 1. Залежність від числа значень Кількість значень Результат 1 Встановлює межі однакової товщини на кожній стороні малюнка. 2 Перше значення встановлює висоту верхньої та нижньої межі, друге — лівої та правої. 3 Перше значення визначає висоту верхньої межі, друге — лівою та правою, а третє — висоту нижньої межі. 4 По черзі встановлюється розміри верхньої, правої, нижньої та лівої межі. - <відсотки>
- Аналогічно <числу>, але значення задаються у відсотках. Той чи інший параметр є обов'язковим.
- <товщина>
- Через слеш пишеться одне, два, три або чотири значення товщини кордону на кожній стороні елемента. Є аналогом border-width і використовує той же синтаксис. Це значення використовується за замовчуванням.
- repeat
- Повторює малюнок кордону.
- round
- Повторює малюнок і масштабує його так, щоб на стороні елемента виявилося ціле число зображень.
Вплив цих параметрів на вигляд рамки показано на рис. 3. "fig">
Приклад
< ;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-image</title> <style> div { border: 30px solid #40c4c8; padding: 20px; border-image: url(/example/image/bg-image.png) 30 round round; }
</style>
</head>
<body> <div>Вітраж являє собою композицію зроблену з безлічі кольорових шибок обрамлених дротом і найбільш ефектно виглядає при проходженні через нього сонячного або штучного світла.</div>
</body>
</html>Результат прикладу показаний на мал. 4.
Мал. 4. Вид рамки
Об'єктна модель
Об'єкт.style .borderImage
Примітка
Firefox до версії 15.0 підтримує властивість -moz-border-image.
Safari до версії 6.0, Chrome до версії 15.0, Android до версії 4.4 підтримують властивість -webkit-border-image.
Opera до версії 15.0 підтримує властивість -o-border-image.
С пецифікація
| Специфікація | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Можлива рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація)— група, яка відповідає за стандарт, задоволена , як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
- Proposed Recommendatio n (Пропонована рекомендація) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення правок редакторами проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 11 | 12 | 7 | 16 | 10.5 | 15 | 3 | 6 | 3.5 | 15 |