border-image-repeat

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

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

 

 

ویژگی 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.

 

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