صفت border-image-source در سی اس اس
صفت border-image-source در css آدرس حاشیه تصویری
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی border-image-source در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی border-image-source در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
ویژگی border-image می تواند مختصر شده ویژگی های زیر باشد:
1- ویژگی border-image-source
2- ویژگی border-image-slice
3- ویژگی border-image-width
4- ویژگی border-image-outset
5- ویژگی border-image-repeat
با ویژگی border-image می توانیم مقادیری برای همه 5 ویژگی ذکر شده تعیین کنیم.
تمامی این ویژگی ها در نسخه CSS3 معرفی شدند. البته میتوانیم برای هر ویژگی به صورت مجزا مقدار تعیین کنیم.
در ادامه این مقاله به معرفی و کاربرد ویژگی border-image-source در زبان CSS می پردازیم.
معرفی ویژگی کاربردی border-image-source در زبان طراحی سی اس اس
توسط خاصیت border-image-source می توانیم آدرس تصویری که در حاشیه یک تگ html ، جای می گیرد را تعیین کنیم. اگر مقدار این ویژگی برابر با none باشد و یا تصویر قابل نمایش نباشد استایل های مربوط به حاشیه اصلی یا border اصلی بر روی تگ html مربوطه اعمال می شود.
در غیر این صورت حاشیه اصلی قابل مشاهده نخواهد بود و به جای آن حاشیه تصویری که توسط ویژگی های سی اس اس که برای تگ html تعریف شده اند، ترسیم می شود
مقادیر صفت کاربردی border-image-source در زبان طراحی css
صفت کاربردی border-image-source که در زبان استایل گذاری CSS3 معرفی شده است، 4 مقدار می پذیرد که عبارتند از:
- مقدار none
- مقدار image
- مقدار initial
- مقدار inherit
مقدار none درون خاصیت border-image-source در زبان سی اس اس
اگر خاصیت border-image-source را برابر با مقدار none قرار دهیم، هیچگونه حاشیه تصویری در نظر گرفته نمی شود.
البته در صورتیکه برای ویژگی border-image-source مقداری تعیین نکنیم هم مقدار none اعمال می شود.
به عبارت بهتر مقدار none به عنوان مقدار پیش فرض ویژگی border-image-source می باشد.
مثال براساس مقدار none برای خاصیت border-image-source
div{border-image-source:none;}
مقدار image درون خاصیت border-image-source در زبان css
اگر خاصیت border-image-sourceرا برابر با مقدار image قرار دهیم، در این حالت مقدار وارد شده همان مسیر تصویری خواهد بود، که در حاشیه تگ html قرار می گیرد.
به عبارت ساده تر منظور از مقدار image در واقع منبع عکسی است، که می خواهد برای حاشیه تصویری به کار رود.
مثال براساس مقدار image برای خاصیت border–image-source
div{border-image-source:url(border.png);}
مقادیر initial و inherit برای صفت border-image-source
مقدار initial ، ویژگی border-image-source را به مقدار اولیه خود می برد. و مقدار inherit موجب می شود تگ مربوطه ویژگی border-image-source را از پدر خود به ارث ببرد.
بررسی خاصیت border-image-source از نظر نسخه زبان طراحی سی اس اس
خصوصیت کاربردی border-image-source در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
بررسی ساختاری خاصیت border-image-source
عناوین ساختاری خاصیت border-image-source | وضعیت ساختاری خاصیت border-image-source |
مقدار پیش فرض | none |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.borderImageSource="url(border.png) |
دستور زبان نوشتاری یا Synntax ویژگی border-image-source
border-image-source: none|image|initial|inherit;
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
پشتیبانی مرورگرهای اینترنتی از خاصیت border-image-source در زبان طراحی css
خاصیت css | |||||
border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت border-image-source در css آدرس حاشیه تصویری – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید