سبد (0)

خصوصیت border-image-repeat

مثال (خصوصیت border-image-repeat)

تعیین کردن چگونگی تکرار image-border:

div
{
border-image-source: url(border.png);
border-image-repeat: round;
}

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-repeat را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.


تعریف و کاربرد

با استفاده از خصوصیت border-image-repeat می توانید نحوه ی نمایش تصویر در ناحیه border را تعیین نمایید.

حالات ممکن:

  • تکرار شود (repeat)
  • با تغییر اندازه تصویر، بدون برش از ابتدا تا انتهای ناحیه بصورت یکسان تکرار شود (round)
  • کشیده شود (stretch)
مقدار پیشفرض stretch
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImageRepeat="round"

نحوه استفاده

border-image-repeat: stretch|repeat|round;

توجه: این خصوصیت را می توانید با دو مقدار تنظیم نمایید، مقدار اول نحوه نمایش تصویر در حاشیه بالا و پایین و مقدار دوم نحوه نمایش در حاشیه سمت راست و چپ را مشخص می کند. اگر مقدار دوم قلم گرفته شود، فرض می کند که با مقدار اول یکسان است.

مقدارتوضیحات
stretch تصویر کشیده می شود تا ناحیه مورد نظر کامل پر شود.
repeat تصویر تکرار می شود تا ناحیه مورد نظر کامل پر شود.
round مانند repeat عمل می کند با این تفاوت که اگر تعداد تکرارهای کامل تصویر، کل ناحیه مورد نظر را نپوشاند، اندازه تصویر اصلی کمی بزرگ یا کوچک می شود. توجه داشته باشید که تصویر در این حالت، از ابتدا تا انتهای ناحیه بصورت یکسان تکرار خواهد شد.
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه