тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

Свойство border-image-outset позволяет отодвинуть рамку за пределы элемента. В качестве значения указывается число без указания единиц измерения либо любые единицы для размеров, кроме процентов. Если указано число без единиц, то оно является множителем, на который умножается значения свойства border-width. Отрицательные значения не поддерживаются.

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

Синтаксис

селектор { border-image-outset: положительное число; }

Пример . Число

Установим значение border-image-outset в 3 по наведению мышкой на элемент. При этом граница сдвинется на 26px*3 - в 3 раза дальше, чем ее ширина, заданная в border-width:

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

:

Пример . Пиксели

Установим значение border-image-outset в 30px по наведению мышкой на элемент. При этом граница сдвинется на 30px:

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

:

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

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