خصوصیت border-image-repeat
مثال (خصوصیت border-image-repeat)
تعیین کردن چگونگی تکرار image-border:
div
{
border-image-source: url(border.png);
border-image-repeat: round;
}
{
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 عمل می کند با این تفاوت که اگر تعداد تکرارهای کامل تصویر، کل ناحیه مورد نظر را نپوشاند، اندازه تصویر اصلی کمی بزرگ یا کوچک می شود. توجه داشته باشید که تصویر در این حالت، از ابتدا تا انتهای ناحیه بصورت یکسان تکرار خواهد شد. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 6823