Eienskap border-image-repeat

Die eienskap border-image-repeat spesifiseer hoe die binnekant van die rand as 'n prentjie herhaal moet word. Vir meer gedetailleerde inligting sien die eienskap border-image.

Sintaksis

cssselektor {
  border-image-repeat: stretch | repeat | round;
}

Waardes

Verstekwaarde: stretch.

Aantal parameters

Kan 1 of 2 parameters aanvaar. As twee parameters gegee word, sal die eerste een vir die boonste en onderste rand wees, en die tweede parameter - vir die linker en regterkant.

Voorbeeld . Waarde 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;
}

Результат:

Voorbeeld . Waarde 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;
}

Результат:

Voorbeeld . Waarde round

Tans is die waarde repeat in die normale toestand, en by wys round. Let daarop dat voor wys daar nie 'n heelgetal ruitjies in die rand pas nie, maar na wys - wel. So werk 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;
}

Результат:

Voorbeeld . Twee woorde

Waarde repeat vir die breedte en stretch vir die hoogte:

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

Результат:

Sien ook