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

Свойство border-image-repeat определяет, необходимо ли маcштабировать, повторять или растянуть border-image.

Свойство border-image-repeat может иметь одно или две значения. Если указано одно значение, оно одинаково применяется для четырех сторон. Если указаны две значения, первое применяется для верхней и нижней стороны, а второе применяется для левой и правой стороны.

Значение по умолчанию stretch
Применяется Ко всем элементам, кроме элементов внутренней таблицы, когда установлено значение "collapse" для свойства border-collapse. Также применяется к ::first-letter.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM Syntax object.style.borderImageRepeat = "round";

Синтаксис

border-image-repeat: stretch | repeat | round | initial | inherit;

Пример

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

Рассмотрим пример со значениями "round" и "repeat", где можно увидеть разницу между ними:

Пример

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

Пример, где указаны значения "space" и "stretched":

Пример

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

Значения

Значение Описание
stretch Изображение растягивается таким образом, чтобы заполнить всю область между границами. Значение по умолчанию.
repeat Изображение повторяется таким образом, чтобы заполнить всю область между границами. Изображение может быть обрезано для полного соответствия.
round Изображение должно повторяться, пока не заполнит всю область между границами. Изображение может быть растянуто для полного соответствия.
space Вся область должна быть заполнена повторяющимися изображениями. Для полного соответствия дополнительное пространство распределяется между всеми повторами.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


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

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