Egenskaben border-image-repeat

Egenskaben border-image-repeat angiver hvordan den indre del af en ramme som billede skal gentages. For mere detaljeret information se egenskaben border-image.

Syntaks

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

Værdier

Standardværdi: stretch.

Antal parametre

Kan tage 1 eller 2 parametre. Hvis der angives to parametre, så vil den første gælde for den øverste og nederste ramme, og den anden parameter - for den venstre og højre.

Eksempel . Værdien 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;
}

Результат:

Eksempel . Værdien 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;
}

Результат:

Eksempel . Værdien round

I normaltilstand er der indstillet værdien repeat, og ved hover - round. Læg mærke til at før hover passer der ikke et helt antal rombier ind i rammen, men efter hover - et helt antal. Sådan virker 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;
}

Результат:

Eksempel . To ord

Værdien repeat for bredden og stretch for højden:

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

Результат:

Se også