صفت border-image-width در css
صفت border-image-width در css اندازه حاشیه تصویری
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی border-image-width در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی border-image-width در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
معرفی ویژگی کاربردی border-image-width در زبان طراحی css
توسط خاصیت border-image-width می توانیم اندازه تکه های حاشیه تصویری در یک تگ html را با مقدار دهی بزرگ یا کوچک کنیم.
نکته مهم
ویژگی border-image-width می تواند به صورت تک مقداری ، دو مقداری ، سه مقداری و چهار مقداری استفاده شود.
که 4 حالت آن عبارتند از :
1- حالت تک مقداری : در این حالت مقدار تعیین شده برای همه جهات حاشیه تصویری ( بالا ، راست ، پایین و چپ ) در تگ html مربوطه در نظر گرفته می شود.
2- حالت دو مقداری : در این حالت مقدار تعیین شده اولی برای جهات ( بالا و پایین ) و مقدار تعیین شده دومی برای جهات ( چپ و راست ) در تگ html مربوطه در نظر گرفته می شود.
3- حالت سه مقداری : در این حالت مقدار تعیین شده اولی برای جهت ( بالا ) ، مقدار تعیین شده دومی برای جهات ( چپ و راست ) و مقدار تعیین شده سومی برای جهت ( پایین ) در تگ html مربوطه در نظر گرفته می شود.
4- حالت چهار مقداری : در این حالت مقدار تعیین شده اولی برای جهت ( بالا ) ، مقدار تعیین شده دومی برای جهت ( راست ) ، مقدار تعیین شده سومی برای جهت ( پایین ) و مقدار تعیین شده چهارمی برای جهت ( چپ ) در تگ html مربوطه در نظر گرفته می شود.
مقادیر صفت کاربردی border-image-width در زبان طراحی سی اس اس
صفت کاربردی border-image-width که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:
- مقدار length
- مقدار number
- مقدار %
- مقدار auto
- مقدار initial
مقدار length درون صفت border-image-width در css
اگر خاصیت border-image-width را برابر با مقدار length قرار دهیم، یک تا چهار مقدار معمولا پیکسلی را برای تعیین طول یا اندازه تکه های حاشیه تصویری در یک تگ html تعیین می کنیم.
برای کسب اطلاعات بیشتر در مورد یادگیری طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
مثال براساس مقدار length برای خاصیت border-image-width
div{border-image-width:10px 20px;}
مقدار number درون خاصیت border-image-width در زبان سی اس اس
اگر خاصیت border-image-width را برابر با مقدار number قرار دهیم، در این حالت عرض حاشیه تصویری ، X برابر مقدار border-width در تگ html مورد نظر خواهد بود.
مقدار number به عنوان مقدار پیش فرض صفت border-image-width می باشد.
مثال براساس مقدار number برای خاصیت border-image-width
div{border-image-width:4;}
مقدار % ( درصدی ) درون صفت border-image-width در css
اگر خاصیت border-image-width را برابر با مقدار % ( درصدی ) قرار دهیم، یک تا چهار مقدار درصدی وارد شده به اندازه ناحیه حاشیه تصویری تگ html مربوطه اشاره دارند.
این مقدار یا مقادیر در عرض جهت تعیین اندازه های راست و چپ ( افقی ) و در طول جهت تعیین اندازه های بالا و پایین ( عمودی ) برای ناحیه حاشیه تصویری تگ html مربوطه اختصاص داده می شود.
مثال براساس مقدار % ( درصدی ) برای خاصیت border-image-width
div{border-image-width:20% 10% 30%;}
مقدار auto درون خاصیت border-image-width در زبان سی اس اس
اگر خاصیت border-image-width را برابر با مقدار auto قرار دهیم، در این حالت همان مقدار پیش فرض جهت تعیین اندازه تکه های حاشیه تصویری در تگ html مربوطه اعمال می شود.
مثال براساس مقدار auto برای خاصیت border-image-width
div{border-image-width:auto;}
مقدار initial درون صفت border-image-width در css
اگر خاصیت border-image-width را برابر با مقدار initial قرار دهیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مثال براساس مقدار initial برای خاصیت border-image-width
div{border-image-width:initial;}
بررسی خاصیت border-image-width از نظر نسخه زبان طراحی سی اس اس
خصوصیت کاربردی border-image-width در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
بررسی ساختاری خاصیت border-image-width
عناوین ساختاری خاصیت border-image-width | وضعیت ساختاری خاصیت border-image-width |
مقدار پیش فرض | 1 |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.borderImageWidth="20px |
پشتیبانی مرورگرهای اینترنتی از خاصیت border-image-width در css
خاصیت css | |||||
border-image-width | 15.0 | 11.0 | 13.0 | 6.0 | 15.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت border-image-width در css اندازه حاشیه تصویری
صفت border-image-width در css اندازه حاشیه تصویری – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید