Eigenschap border-image-repeat

De eigenschap border-image-repeat specificeert hoe het binnenste deel van de rand als afbeelding wordt herhaald. Voor meer gedetailleerde informatie zie de eigenschap border-image.

Syntaxis

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

Waarden

Waarde	Beschrijving
`stretch`	Rekt de randafbeelding uit tot de afmetingen van het element. Dit is de standaardwaarde.
`repeat`	Herhaalt de randafbeelding.
`round`	Herhaalt de afbeelding en schaalt deze zo dat er een geheel aantal afbeeldingen op de zijde van het element past.

Standaardwaarde: stretch.

Aantal parameters

Accepteert 1 of 2 parameters. Als er twee parameters zijn opgegeven, dan is de eerste voor de boven- en onderrand, en de tweede parameter - voor de linker- en rechterrand.

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

Momenteel is in de normale staat de waarde repeat ingesteld, en bij hover - round. Merk op dat vóór het hoveren er geen geheel aantal ruiten in de rand past, en na het hoveren - wel. Zo werkt 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 woorden

Waarde repeat voor de breedte en stretch voor de 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;
}

Результат:

Zie ook

de eigenschap border-image,
dat een korte notatie is voor de rand-afbeelding
de eigenschap border-image-source,
dat het pad naar de afbeelding voor de rand specificeert
de eigenschap border-image-slice,
dat het snijden van de afbeelding voor de rand specificeert
de eigenschap border-image-width,
dat de grootte van de afbeelding voor de rand specificeert
de eigenschap border-image-outset,
dat de verschuiving van de afbeelding voor de rand specificeert