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