صفت border-image-repeat در css ناحیه حاشیه تصویری

صفت border-image-repeat در css ناحیه حاشیه تصویری

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی border-image-repeat در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی border-image-repeat در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

معرفی ویژگی کاربردی border-image-repeat در زبان طراحی css

توسط خاصیت border-image-repeat می توانیم چگونگی تغییر سایز و چینش تکه های حاشیه تصویری را در یک تگ html تعیین کنیم.

خصوصیت border-image-repeat می تواند یک یا دو مقدار بگیرد. مقادیر مذکور کلمات کلیدی این صفت هستند، که در ادامه توضیح می دهیم.

در صورتی که خصوصیت border-image-repeat ، دو مقدار در تگ html بگیرد، مقدار اولی مربوط به تکه های بالایی و پایینی در حاشیه تصویری بوده و مقدار دومی هم مربوط به تکه های سمت چپ و راست در حاشیه تصویری تگ html مورد نظر می باشد.

مقادیر صفت کاربردی border-image-repeat در زبان طراحی سی اس اس

صفت کاربردی border-image-repeat که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

مقدار stretch
مقدار repeat
مقدار round
مقدار space
مقدار initial

مقدار stretch درون خاصیت border-image-repeat در زبان css

اگر خاصیت border-image-repeat را برابر با مقدار stretch قرار دهیم، اگر یک مقداری باشد، تمام ناحیه حاشیه تصویری کشیده خواهد شد.

اما در صورتی که صفت border-image-repeat صاحب دو مقدار باشد، برای مقدار stretch دو حالت رخ می دهد:

1- در شرایطی که مقدار stretch به عنوان مقدار اول تعیین شود، بخش های بالا و پایین و مرکزی تصویر به شکل افقی کشیده می شود، تا اینکه ناحیه حاشیه تصویری کاملا پر شود.

2- در شرایطی که مقدار stretch به عنوان مقدار دوم تعیین شود، بخش های راست و چپ و مرکزی تصویر به شکل عمودی کشیده می شود، تا اینکه ناحیه حاشیه تصویری کاملا پر شود.

مقدار stretch به عنوان مقدار پیش فرض صفت border-image-repeat می باشد.

مثال براساس مقدار stretch برای خاصیت border-image-repeat

[html]div{border-image-repeat:stretch;}[/html]

مقدار repeat درون خاصیت border-image-repeat در زبان سی اس اس

اگر خاصیت border-image-repeat را برابر با مقدار repeat قرار دهیم، در شرایط تک مقداری بودن صفت در تمام ناحیه حاشیه تصویری ، تصویر مورد نظر در تگ html مربوطه تکرار می شود.

اما در صورتی که صفت border-image-repeat صاحب دو مقدار باشد، برای مقدار repeat دو حالت رخ می دهد:

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

2- در شرایطی که مقدار repeat به عنوان مقدار دوم تعیین شود، بخش های راست و چپ و مرکزی تصویر به شکل عمودی از منطقه وسط مخصوص به خود تکرار می شود، تا اینکه ناحیه حاشیه تصویری کاملا پر شود.

مثال براساس مقدار repeat برای خاصیت border-image-repeat

[html]div{border-image-repeat:repeat;}[/html]

مقدار round درون خاصیت border-image-repeat در زبان css

اگر خاصیت border-image-repeat را برابر با مقدار round قرار دهیم، حالتی مشابه مقدار repeat در صفت مذکور رخ می دهد.

با این تفاوت که اگر تصویر با تکرار خود نتواند کل سطح تگ html را بصورت کامل بپوشاند، اندازه تصویر مجددا محاسبه می شود تا جایی که این تکرارها بطور کامل سطح تگ html مورد نظر را پوشش دهند.

مثال براساس مقدار round برای خاصیت border-image-repeat

[html]div{border-image-repeat:round;}[/html]

مقدار space درون خاصیت border-image-repeat در زبان سی اس اس

اگر خاصیت border-image-repeat را برابر با مقدار space قرار دهیم،حالتی مشابه مقدار repeat در صفت مذکور رخ می دهد.

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

مثال براساس مقدار space برای خاصیت border-image-repeat

[html]div{border-image-repeat:space;}[/html]

مقدار initial درون خاصیت border-image-repeat در زبان css

اگر خاصیت border-image-repeat را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

صفت border-image-repeat در css ناحیه حاشیه تصویری

بررسی خاصیت border-image-repeat از نظر نسخه زبان طراحی سی اس اس

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

بررسی ساختاری خاصیت border-image-repeat


عناوین ساختاری خاصیت border-image-repeat	وضعیت ساختاری خاصیت border-image-repeat
مقدار پیش فرض	stretch
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.borderImageOutset="10px