115 of 313 menu

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

selektor { 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

<div id="elem"></div> #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

<div id="elem"></div> #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:

<div id="elem"></div> #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:

<div id="elem"></div> #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

Azərbaycan
AfrikaansБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Biz saytin işi, analitika və fərdiləşdirmə üçün cookie istifadə edirik. Məlumatların emalı Məxfilik Siyasəti əsasında həyata keçirilir.
hamısını qəbul et konfiqurasiya et rədd et