мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство border-image-repeat

Свойство border-image-repeat задает способ повторения внутренней части границы в виде картинки. Для более подробной информации смотрите свойство border-image.

Синтаксис

селектор { border-image-repeat: stretch | repeat | round; }

Значения

Число параметров Описание
stretch Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat Повторяет рисунок границы.
round Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Значение по умолчанию: stretch.

Количество параметров

Может принимать 1 или 2 параметра. Если задано два параметра, то первый из них будет для верхней и нижней границы, а второй параметр - для левой и правой.

Пример . Значение stretch

<div id="elem"></div> #elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: stretch; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }

:

Пример . Значение repeat

<div id="elem"></div> #elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: repeat; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }

:

Пример . Значение round

Сейчас в нормальном состоянии установлено значение repeat, а по наведению - round. Обратите внимание что до наведения в границу помещается не целое количество ромбиков, а после наведения - целое. Так и работает round:

<div id="elem"></div> #elem:hover { border-image-repeat: round; } #elem { border-style: solid; border-width: 42px; border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }

:

Пример . Два слова

Значение repeat для ширины и stretch для высоты:

<div id="elem"></div> #elem { border-image-repeat: repeat stretch; border-image-source: url("image.png"); border-image-slice: 26; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }

:

Смотрите также

  • свойство border-image,
    которое является сокращением для границы-картинки
  • свойство border-image-source,
    которое задает путь к картинке для границы
  • свойство border-image-slice,
    которое разбиение картинки для границы
  • свойство border-image-width,
    которое задает размер картинки для границы
  • свойство border-image-outset,
    которое задает сдвиг картинки для границы