border-image-repeat касиети

border-image-repeat касиети сүрөт түрүндөгү чектин ички бөлүгүн кайталоо ыкмасын белгилейт. Кененирээк маалымат үчүн border-image касиетин караңыз.

Синтаксис

cssселектор {
  border-image-repeat: stretch | repeat | round;
}

Маанилер

Демейки маани: stretch.

Параметрлердин саны

1 же 2 параметрди кабыл ала алат. Эгер эки параметр берилсе, анда биринчиси үстүнкү жана төмөнкү чек үчүн, ал эми экинчи параметр - сол жана оң чектер үчүн болот.

Мисал . 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;
}

Результат:

Мисал . 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;
}

Результат:

Мисал . round мааниси

Азыркы учурда кадимки абалда repeat мааниси орнотулган, ал эми курсорду абайлаганда - round. Курсорду абайлаганга чейин чекке бүтүн эмес сандагы ромбчиктер сыятын, ал эми абайлагандан кийин - бүтүн сандагы. Мына 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;
}

Результат:

Мисал . Эки сөз

Туурасы үчүн repeat мааниси жана бийиктиги үчүн stretch мааниси:

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

Результат:

Ошондой эле караңыз