⌘K

Border-image-repeat xassəsi

border-image-repeat xassəsi şəkil kimi təqdim olunan çərçivənin daxili hissəsinin təkrarlanma üsulunu təyin edir. Ətraflı məlumat üçün border-image xassəsinə baxın.

Sintaksis

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

Qiymətlər

Parametrlərin sayı Təsvir
stretch Çərçivə nümunəsini elementin ölçülərinə qədər uzadır. Bu qiymət defolt olaraq istifadə olunur.
repeat Çərçivə nümunəsini təkrarlayır.
round Nümunəni təkrarlayır və elementin tərəfində tam sayda şəkil olması üçün onun ölçüsünü dəyişir.

Defolt qiymət: stretch.

Parametrlərin sayı

1 və ya 2 parametr qəbul edə bilər. Əgər iki parametr təyin olunubsa, onda birincisi yuxarı və aşağı çərçivə üçün, ikincisi isə sol və sağ çərçivə üçün olacaq.

Nümunə . Stretch qiyməti

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ümunə . Repeat qiyməti

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ümunə . Round qiyməti

Hal-hazırda normal vəziyyətdə repeat qiyməti təyin edilib, üzərinə gəldikdə isə - round qiyməti. Diqqət edin ki, üzərinə gəlməzdən əvvəl çərçivədə rombların tam sayı yoxdur, üzərinə gəldikdən sonra isə - tam sayda olur. round belə işləyir: 

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ümunə . Iki söz

En üçün repeat qiyməti və hündürlük üçün stretch qiyməti: 

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

Результат:

Həmçinin bax

BackBorder-image-slice xassəsiNextBorder-image-outset xassəsi