CSS приклад: border-image

Тег Border-Image в CSS: Параметри, Значення та Синтаксис

Тег border-image в CSS використовується для відображення малюнкової рамки навколо елемента. Він дозволяє задати різні значення для створення ефектної рамки веб-сторінки.

Опис

Тег border-image в CSS встановлює рисунок рамки для елемента. Товщина рамки встановлюється властивістю border, і якщо вказано border: 0, рамка не відображується. Фон, якщо він заданий через властивість background, відображається під рамкою.

Синтаксис

border-image: none | [<URL> [<число> | <проценти>]{1,4} [/ <товщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

Значення

none: Не відображає малюнкову рамку, використовується встановлений стиль границі.
URL: Шлях до графічного файлу. Обов'язковий параметр.
<число>: Одне, два, три або чотири значення, які вказують розміри частин зображення в пікселях, встановлюючи області поділу.
<проценти>: Аналогічно <числу>, але значення задаються в відсотках. Один із параметрів обов'язковий.
<товщина>: Одне, два, три або чотири значення товщини границі на кожній стороні елемента.
stretch: Розтягує малюнок границі до розмірів елемента.
repeat: Повторює малюнок границі.
round: Повторює малюнок і масштабує його так, щоб на стороні елемента було ціле число зображень.

Приклад

HTML5CSS2.1CSS3

<!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>

Підтримка браузерами

Firefox до версії 15.0 підтримує властивість -moz-border-image.

Safari, Chrome до версії 15.0, Android і iOS підтримують властивість -webkit-border-image.

Opera до версії 15.0 підтримує властивість -o-border-image.

Границі

Часті запитання

Q: Як використовувати border-image в CSS?

A: Для використання border-image в CSS потрібно вказати шлях до зображення, яке ви хочете використовувати як рамку, а також вказати розміри відступів для розтягнення рамки.
Q: Як вказати рамку для елемента за допомогою border-image?

A: Для вказання рамки для елемента за допомогою border-image в CSS використовується властивість border-image-source.
Q: Де найчастіше використовують border-image в CSS?

A: Border-image в CSS часто використовується для створення стилізованих рамок навколо блоків або кнопок на веб-сайтах.
Q: Як вказати розміри рамки при використанні border-image в CSS?

A: Для вказання розмірів рамки при використанні border-image в CSS використовуються властивості border-image-width та border-image-outset.
Q: Чи підтримується властивість border-image в усіх браузерах?

A: Властивість border-image підтримується у більшості сучасних браузерах, але можуть бути певні відмінності у підтримці між різними версіями браузерів.