Својство 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;
}

Результат:

Погледајте такође