آموزش ویژگی border-image-repeat در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی border-image-repeat در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی border-image-repeat در CSS
با استفاده از ویژگی border-image-repeat
در CSS میتوان مشخص کرد که آیا تصویر بوردر ، بصورت کاشی وار تکرار شود یا نه مثلا بصورت کشیده نمایش داده شود یا دیگر مواردی که در ادامه باهاشون آشنا خواهید شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی border-image-repeat
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از مقدار round
1 2 3 4 5 6 7 8 9 |
<style> div{ border-image-source:url(bg7.png); border-image-slice: 30; border-image-repeat:round; } </style> |
مثال شماره ۲ : استفاده از مقدار space
1 2 3 4 5 6 7 8 9 |
<style> div{ border-image-source:url(bg7.png); border-image-slice: 20; border-image-repeat:space; } </style> |
مثال شماره ۳ : استفاده همزمان از ۲ مقدار (برای بالا و پایین – راست و چپ)
1 2 3 4 5 6 7 8 9 |
<style> div{ border-image-source:url(bg7.png); border-image-slice: 30; border-image-repeat:stretch round; } </style> |
Free-Learn
جدول مشخصات ویژگی border-image-repeat در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | stretch |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | ندارد | اطلاعات بیشتر |
نسخه | CSS3 |
نحوه استفاده در جاوااسکریپت | object.style.borderImageRepeat=”round”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی border-image-repeat
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
border-image-repeat | ۱۵٫۰ | ۱۵٫۰ | ۱۵٫۰ | ۶٫۰ | ۱۱٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
border-image-repeat: stretch|repeat|round|space|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی border-image-repeat در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
stretch | پیش فرض – برای پر کردن کل منطقه تصویر کشیده میشود. |
repeat | تصویر بصورت کاشی وار تکرار میشود. |
round | تصویر بصورت کاشی وار تکرار میشود و سعی میکند فضای خالی را پر کند. |
space | تصویر بصورت کاشی وار تکرار میشود و فضای خالی بصورت مساوی تقسیم میشود. |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
تصویری که در مثال ها ازش استفاده شده و به دور لبه های عنصر کشیده می شود تصویر زیر می باشد.
همونطور که در مثال شماره ۳ مشاهده کردید، ما نیز میتوانیم برای هر یک از جهت های عنصر بصورت مجزا مقدار بدهیم، که روش مقداردهی بصورت زیر می باشد :
- اگر از ۱ مقدار استفاده کردید
1 |
border-image-repeat: repeat; |
یعنی برای جهت بالا و راست و پایین و چپ
- اگر از ۲ مقدار استفاده کردید
1 |
border-image-repeat: repeat stretch; |
مقدار اول برای بالا و پایین تنظیم می شود و مقدار دوم برای راست و چپ
- اگر از ۳ مقدار استفاده کردید
1 |
border-image-repeat: repeat stretch round; |
مقدار اول برای بالا تنظیم می شود و مقدار دوم برای راست و چپ و مقدار سوم برای پایین
- اگر از ۴ مقدار استفاده کردید
1 |
border-image-repeat: repeat round stretch space; |
مقدار اول برای بالا تنظیم می شود و مقدار دوم برای سمت راست و مقدار سوم برای پایین و مقدار چهارم برای سمت چپ