خصوصیت border-image-repeat

مثال

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

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

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

    

هیچ کدام از مرورگرهای اصلی، خصوصیت 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 عمل می کند با این تفاوت که اگر تعداد تکرارهای کامل تصویر، کل ناحیه مورد نظر را نپوشاند، اندازه تصویر اصلی کمی بزرگ یا کوچک می شود. توجه داشته باشید که تصویر در این حالت، از ابتدا تا انتهای ناحیه بصورت یکسان تکرار خواهد شد.