این آموزش در تاریخ ۱۳۹۹/۰۱/۲۱ آپدیت شده است.
آموزش ویژگی 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; |
مقدار اول برای بالا تنظیم می شود و مقدار دوم برای سمت راست و مقدار سوم برای پایین و مقدار چهارم برای سمت چپ
