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

Својството border-image-repeat го одредува начинот на повторување на внатрешниот дел од границата како слика. За повеќе детални информации погледнете го својството border-image.

Синтакса

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

Вредности

Стандардна вредност: stretch.

Број на параметри

Може да прими 1 или 2 параметри. Ако се зададени два параметри, тогаш првиот од нив ќе биде за горната и долната граница, а вториот параметар - за левата и десната.

Пример . Вредност stretch

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

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

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

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

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

css#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 за висината:

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

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

Результат:

Погледнете ги и