Vlastnosť border-image-repeat

Vlastnosť border-image-repeat nastavuje spôsob opakovania vnútornej časti ohraničenia v podobe obrázka. Pre podrobnejšie informácie pozri vlastnosť border-image.

Syntax

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

Hodnoty

Predvolená hodnota: stretch.

Počet parametrov

Môže prijať 1 alebo 2 parametre. Ak sú zadané dva parametre, tak prvý z nich bude pre horné a dolné ohraničenie, a druhý parameter - pre ľavé a pravé.

Príklad . Hodnota 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;
}

Результат:

Príklad . Hodnota 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;
}

Результат:

Príklad . Hodnota round

Teraz je v normálnom stave nastavená hodnota repeat, a pri prejdení myšou - round. Všimnite si, že pred prejdením sa do ohraničenia zmestí nie celé množstvo kosoštvorcov, ale po prejdení - celé. Tak funguje 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;
}

Результат:

Príklad . Dve slová

Hodnota repeat pre šírku a stretch pre výšku:

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

Результат:

Pozri tiež