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

Свойството border-image-width управлява ширината на видимата част от рамката, мащабира я. Ако тази стойност е по-голяма от ширината на border-width, изображението на границата ще се промъкне под съдържанието.

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

Синтаксис

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

Стойности

Стойност по подразбиране: 1.

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

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

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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% от размера на блока (тоест двете граници, дясната и лявата, ще покрият целия блок):

html<div id="elem"></div>

css#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% от размера на блока:

html<div id="elem"></div>

css#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 при посочване на елемента с мишката:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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;
}

Результат:

Вижте също