این آموزش در تاریخ ۱۴۰۰/۱۰/۲۸ آپدیت شده است.
آموزش ویژگی border-image-slice در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی border-image-slice در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی border-image-slice در CSS
با استفاده از ویژگی border-image-slice در CSS میتوان نحوه برش خوردن تصویر را در گوشه و لبه های یک عنصر مشخص کرد، و بطور کلی تصویر به ۹ بخش تکه تکه میشود، ۴ تا گوشه و ۴ تا لبه و ۱ دونه وسط .
بخش میانی بصورت پیشفرض شفاف ( transparent ) می باشد این یعنی بخش میانی عملا نمایش داده نمیشود، ولی خب با استفاده از مقدار fill میتوانیم این بخش را نیز به نمایش درآوریم. ( مثال شماره ۳ )
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی border-image-slice را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از عدد
|
1 2 3 |
.Box1 { border-image-slice: 20; } |
مثال شماره ۲ : استفاده از مقدار درصدی
|
1 2 3 |
.Box1 { border-image-slice: 20%; } |
مثال شماره ۳ : استفاده از مقدار fill برای نمایش دادن بخش میانی همچنین استفاده از ۲ مقدار بصورت همزمان ( بالا و پایین fill و راست و چپ عدد ۲۰ )
|
1 2 3 |
.Box1 { border-image-slice: fill 20; } |
Free-Learn
جدول مشخصات ویژگی border-image-slice در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۱۰۰% |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.borderImageSlice=”20%”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی border-image-slice در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| border-image-slice | ۱۵ | ۱۵ | ۱۵ | ۶ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
border-image-slice: number|%|fill|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی border-image-slice در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| number | استفاده از عدد ( مثله ۲۰ ) |
| % | استفاده از درصد ( پیش فرض %۱۰۰ می باشد ) |
| fill | برای نمایش بخش میانی تصویر |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
ما نیز میتوانیم برای هر یک از جهت های عنصر ، تصویر را بصورت مجزا مقدار بدهیم، که روش مقداردهی بصورت زیر می باشد :
- اگر از ۱ مقدار استفاده کردید
|
1 |
border-image-slice: 10%; |
یعنی برای جهت بالا و راست و پایین و چپ
- اگر از ۲ مقدار استفاده کردید
|
1 |
border-image-slice: 10% 20%; |
مقدار اول برای بالا و پایین تنظیم می شود و مقدار دوم برای راست و چپ
- اگر از ۳ مقدار استفاده کردید
|
1 |
border-image-slice: 10% 20% 30%; |
مقدار اول برای بالا تنظیم می شود و مقدار دوم برای راست و چپ و مقدار سوم برای پایین
- اگر از ۴ مقدار استفاده کردید
|
1 |
border-image-slice: 10% 20% 30% 40%; |
مقدار اول برای بالا تنظیم می شود و مقدار دوم برای سمت راست و مقدار سوم برای پایین و مقدار چهارم برای سمت چپ
