border-image-repeat

از ویژگی border-image-repeat برای تعیین چگونگی تغییر اندازه و چیدمان تکه های حاشیه تصویری, استفاده می شود.

تصویر مورد نظر که برای حاشیه تصویری مورد استفاده قرار می گیرد بوسیله ویژگی border-image-slice به نه تصویر تقسیم می شود.

 
تقسیم بندی حاشیه تصویری در css
 

ویژگی border-image-repeat می تواند یک مقدار و یا دو مقدار داشته باشد. این مقادیر از نوع کلمات کلیدی هستند. اگر دو مقدار تعیین شود, مقدار اول مربوط به تکه های بالا و پایین حاشیه تصویری و مقدار دوم مربوط به تکه های سمت چپ و راست می باشد. اگر یک مقدار تعیین شود, مقدار دوم برابر با مقدار اول در نظر گرفته می شود.

 

stretch

این حالت که حالت پیشفرض است اگر به عنوان مقدار اول تعیین شود, باعث می شود تا قسمت های بالا و مرکز و پایین تصویر بصورت افقی کشیده شوند تا ناحیه حاشیه تصویری را پر کنند. و اگر به عنوان مقدار دوم تعیین شود, باعث می شود تا قسمت های راست و مرکز و چپ تصویر مورد نظر به صورت عمودی کشیده شوند تا ناحیه حاشیه تصویری عنصر پر شود.

 


border-image-repeat: stretch;

 

 

repeat

اگر این مقدار به عنوان مقدار اول تعیین شود, باعث می شود تا قسمت های بالا و مرکز و پایین تصویر از لحاظ افقی در وسط قسمت های مخصوص به خود در عنصر قرار بگیرند و تا جایی که تمام سطح مخصوص به خود را پوشش دهند, تکرار شوند. همینطور اگر این مقدار به عنوان مقدار دوم تعیین شود, باعث می شود تا قسمت های راست و مرکز و چپ تصویر از لحاظ عمودی در وسط قسمت های مخصوص به خود در عنصر قرار بگیرند و تا جایی که تمام سطح مخصوص به خود را پوشش دهند, تکرار شوند.

 


border-image-repeat: repeat;

 

 

round

کاملا شبیه به repeat عمل می کند با این تفاوت که اگر تصویر با تکرار نتواند کل سطح عنصر را بصورت مناسب بپوشاند, اندازه تصویر دوباره محاسبه می شود بطوری که این بار تکرارها مناسب برای پوشش سطح عنصر باشند.

 


border-image-repeat: round;

 

 

space

این مقدار نیز کاملا شبیه به repeat عمل می کند با این تفاوت که اگر تصویر با تکرار نتواند کل سطح عنصر را بصورت مناسب بپوشاند, فضای خالی باقیمانده سطح عنصر, در اطراف تکرارها تقسیم و توزیع می شود.

 


border-image-repeat: space;

 

در دمویی که در ادامه خواهید دید از تصویر زیر استفاده شده است:

 
حاشیه تصویری
 

با تغییر مقادیر این ویژگی در دموی زیر نحوه کار آن را بررسی کنید:

 

See the Pen border-image-repeat by Mojtaba Seyedi (@seyedi) on CodePen.


 

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

2 دیدگاه برای “border-image-repeat

  1. سلام و عرض ادب
    وقتتون بخیر
    تشکر از مطلب خوبتون
    من این مطلب و خوندم
    همونور که گفته بودین بین space round repaet تغییر زیادی نیست
    یعنی تفاوتشون ناپیداست و نمیشه تشخیص داد
    امکانش هست یک مثال بزنید که تفاوت این 3 مقدار درونش پیدا و مشخص باشه؟

    1. سلام. الان طرح خاصی که بتونه تفاوت این سه رو هم زمان نشون بده به ذهنم نمیرسه ولی اگر زمانی برخوردم به همچین چیزی توی این مطلب قرار میدم.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *