Omadus border-image-repeat

Omadus border-image-repeat määrab piiripildi sisuosa kordamise viisi. Täpsema teabe saamiseks vaadake omadust border-image.

Süntaks

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

Väärtused

Vaikeväärtus: stretch.

Parameetrite arv

Võib võtta 1 või 2 parameetrit. Kui on määratud kaks parameetrit, siis esimene neist kehtib ülemise ja alumise piiri jaoks ning teine parameeter - vasaku ja parema piiri jaoks.

Näide . Väärtus 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;
}

Результат:

Näide . Väärtus 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;
}

Результат:

Näide . Väärtus round

Praegu on tavaseisundis määratud väärtus repeat, ning pealelehel - round. Pange tähele, et enne pealelehet ei mahu piiridesse täisarv rombe, kuid peale pealelehet - täisarv. Nii see round töötab:

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

Результат:

Näide . Kaks sõna

Väärtus repeat laiuse jaoks ning stretch kõrguse jaoks:

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

Результат:

Vaata ka