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

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

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

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

Синтаксис

селектор { border-image-width: CSS единицы | проценты | число | auto; }

:

Значения

Значение Описание
CSS единицы Значение в заданных CSS единицах.
Проценты Значения в процентах относительно размера блока, которому задана граница.
Число Числовое значение, на которое умножается border-width.
auto Ключевое слово. Если оно задано, значение равно соответственному border-image-slice. Если подходящего размера нет, используется значение border-width, при этом картинка заполняет весь угол рамки, заползая под контент. Смотрите примеры для лучшего понимания.

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

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

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

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

:

Пример . Изменим border-image-repeat на round

В предыдущем примере по наведению в границе будет не целое количество ромбиков. Исправим это, установив border-image-repeat в значении round:

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

:

Пример . Проценты

Установим значение border-image-width в 50% по наведению мышкой на элемент. При этом граница станет размером 50% от размера блока (то есть две границы, правая и левая, покроют собой весь блок):

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

:

Пример . Проценты

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

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

:

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

Установим значение border-image-width в 50px по наведению мышкой на элемент:

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

:

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

Установим значение border-image-width в auto по наведению мышкой на элемент.

До наведения border-image-width имеет значение 1 (по умолчанию). В примере специально border-width задано в 52px, а border-image-slice - в значении 26 (эффект с auto будет наблюдаться только если border-width не равно border-image-slice). Из-за того, что border-image-width имеет значение 1, картинка границы будет занимать всю ширину border-width, то есть растянется на 52px. По наведению значение border-image-width установится в auto и ширина картинки станет равна значению border-image-slice, то есть 26px:

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

:

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

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