Vlastnost border-image-repeat

Vlastnost border-image-repeat nastavuje způsob opakování vnitřní části ohraničení ve formě obrázku. Pro podrobnější informace vizte vlastnost border-image.

Syntaxe

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

Hodnoty

Výchozí hodnota: stretch.

Počet parametrů

Může přijímat 1 nebo 2 parametry. Pokud jsou zadány dva parametry, pak první z nich bude pro horní a dolní ohraničení, a druhý parametr - pro levé a pravé.

Pří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;
}

Результат:

Pří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;
}

Результат:

Příklad . Hodnota round

Nyní je v normálním stavu nastavena hodnota repeat, a po najetí - round. Všimněte si, že před najetím se do ohraničení vejde necelé množství kosočtverců, a po najetí - 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;
}

Результат:

Příklad . Dvě slova

Hodnota repeat pro šířku a stretch pro 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;
}

Результат:

Vizte také