border-image-repeat հատկությունը

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

Результат:

Տես նաև