Sifa border-image-repeat

Sifa border-image-repeat inabainisha namna ya kurudia sehemu ya ndani ya mpaka kama picha. Kwa taarifa za kina tazama sifa border-image.

Kisarufu

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

Thamani

Thamani ya default: stretch.

Idadi ya parameta

Inaweza kuchukua 1 au 2 parameta. Ikiwa parameta mbili zimetolewa, basi ya kwanza kati yao itakuwa kwa mpaka wa juu na chini, na parameta ya pili - kwa kushoto na kulia.

Mfano . Thamani 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;
}

Результат:

Mfano . Thamani 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;
}

Результат:

Mfano . Thamani round

Sasa katika hali ya kawaida imewekwa thamani repeat, na kwa kuweka kielekezo - round. Kumbuka kuwa kabla ya kuweka kielekezo katika mpaka haijaingizwa nambari kamili ya almasi, na baada ya kuweka kielekezo - nambari kamili. Hivyo ndivyo round inavyofanya kazi:

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

Результат:

Mfano . Maneno mawili

Thamani repeat kwa upana na stretch kwa urefu:

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

Результат:

Angalia pia