⌘K

A border-image-repeat tulajdonság

A border-image-repeat tulajdonság beállítja a képként megjelenített kerület belső részének ismétlésének módját. Részletesebb információért lásd a border-image tulajdonságot.

Szintaxis

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

Értékek

Paraméterek száma Leírás
stretch Kinyújtja a kerület képét az elem méretéig. Ez az alapértelmezett érték.
repeat Ismétli a kerület képét.
round Ismétli a képet és úgy méretezi, hogy az elem oldalán egész számú kép jelenjen meg.

Alapértelmezett érték: stretch.

Paraméterek száma

1 vagy 2 paramétert fogadhat. Ha két paraméter van megadva, akkor az első a felső és az alsó kerületre vonatkozik, a második pedig a bal és a jobb oldalira.

Példa . A stretch érték

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

Результат:

Példa . A repeat érték

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

Результат:

Példa . A round érték

Jelenleg normál állapotban a repeat érték van beállítva, rámutatáskor pedig a round. Figyeljük meg, hogy rámutatás előtt a kerületbe nem egész számú rombusz fér el, rámutatás után pedig egész. Így működik a 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;
}

Результат:

Példa . Két érték

repeat érték a szélességre és stretch a magasságra: 

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

Результат:

Lásd még

BackA border-image-slice tulajdonságNextA border-image-outset tulajdonság