Border-image-repeat hossasy

border-image-repeat hossasy, surat görnüşindäki çäginiň içki böleginiň gaýtalanýan usulyny kesgitleýär. Giňişleýin maglumat üçin border-image hossasyna serediň.

Sintaksis

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

Görnüşleri

Bellenen ýagdaýdaky görnüşi: stretch.

Parametr sany

1 ýa-da 2 parametr kabul edip biler. Iki parametr berlen bolsa, birinjisi ýokarky we aşaky çägiler üçin, ikinji parametr bolsa çep we sag çägiler üçin bolar.

Mysal . Stretch görnüşi

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

Результат:

Mysal . Repeat görnüşi

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

Результат:

Mysal . Round görnüşi

Häzirki wagtda adaty ýagdaýda repeat görnüşi bellendi, göz ýetirilende bolsa - round görnüşi bellendi. Üns beriň, göz ýetirilmezden ozal çägide bitin sanly rombik ýerleşmeýär, göz ýetirilenden soňra bolsa bitin sanly. Şeýlelik bilen round işleýär:

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

Результат:

Mysal . Iki söz

repeat görnüşi ini üçin we stretch görnüşi beýikligi üçin:

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

Результат:

Şeýle-de serediň