CSS свойство border-image

Сокращенное свойство border-image дает возможность установить изображение как границу для элемента. Данное свойство устанавливается с помощью других свойств border-image. Если значение опущено, оно устанавливается в значение по умолчанию. Некоторые характеристики значений:

  • border-image-source - Если установлено значение "none", или если изображение не отображается, будут использованы стили границ.
  • border-image-slice - Если не установлено значение "fill", средняя часть изображения будет полностью прозрачна.
  • border-image-width - Если значение этого свойства больше, чем border-width элемент, граница изображение расширится за пределы padding (и/или content). Данное свойство может использовать одно, две, три или четыре значения.
  • border-image-outset -Можно использовать одно, две, три или четыре значения.
  • border-image-repeat - Могут быть установлены две значения. Если второе значение опущено, будет то же самое, что и при первом значении. Когда устанавливаем только одно значение, оно применяется для всех сторон. При использовании двух значений, первое применяется для верхней и нижней стороны, а второе - для правой и левой.
Значение по умолчанию none 100% 1 0 stretch
Применяется Применяется ко всем элементам, кроме элементов внутренней таблицы, когда установлено значение collapse для свойства border-collapse. Также применяется к ::first-letter.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.borderImage = "url(border.png) 30 round"

Синтаксис

border-image: source slice width outset repeat | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Пример с разными значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 30%;
      border-image-repeat: repeat;
      border-image-width: 15px;
      }
      .border2 {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 20%;
      border-image-repeat: round;
      border-image-width: 10px;
      }
      .border3 {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 15%;
      border-image-repeat: space;
      border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image со всеми значениями.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Значения

Значение Описаниеc
border-image-source Устанавливает исходное изображение, которое используется для создания границы-изображения. Это может быть URL, data URI, CSS gradient или inline SVG.
border-image-slice Определяет, как разделить изображение, установленное свойством border-image-source. Изображение всегда разделяется на девять частей - четыре угла, четыре края и средняя часть.
border-image-width Определяет ширину границы-изображения.
border-image-repeat Определяет, должна ли граница изображения быть повторена, масштабируема или растянута.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

16.0+ 12.0+ 15.0+ 6.0+ 11.0+


Считаете ли это полезным?

Похожие статьи