صفت 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 مربوطه در نظر گرفته می شود.

3- حالت چهار مقداری : در این حالت مقدار تعیین شده اولی برای جهت ( بالا ) ، مقدار تعیین شده دومی برای جهت ( راست ) ، مقدار تعیین شده سومی برای جهت ( پایین ) و مقدار تعیین شده چهارمی برای جهت ( چپ ) در تگ 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;}

1	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;}

1	div{border-image-width:4;}

مقدار % ( درصدی ) درون خاصیت border-image-width در زبان css

اگر خاصیت border-image-width را برابر با مقدار % ( درصدی ) قرار دهیم، یک تا چهار مقدار درصدی وارد شده به اندازه ناحیه حاشیه تصویری تگ html مربوطه اشاره دارند.

این مقدار یا مقادیر در عرض جهت تعیین اندازه های راست و چپ ( افقی ) و در طول جهت تعیین اندازه های بالا و پایین ( عمودی ) برای ناحیه حاشیه تصویری تگ html مربوطه اختصاص داده می شود.

مثال براساس مقدار % ( درصدی ) برای خاصیت border-image-width

div{border-image-width:20% 10% 30%;}

1	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;}

1	div{border-image-width:auto;}

مقدار initial درون خاصیت border-image-width در زبان css

اگر خاصیت border-image-width را برابر با مقدار initial قرار دهیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مثال براساس مقدار initial برای خاصیت border-image-width

div{border-image-width:initial;}

1	div{border-image-width:initial;}

صفت border-image-width در css اندازه حاشیه تصویری

بررسی خاصیت border-image-width از نظر نسخه زبان طراحی سی اس اس

خصوصیت کاربردی border-image-width در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

بررسی ساختاری خاصیت border-image-width


عناوین ساختاری خاصیت border-image-width	وضعیت ساختاری خاصیت border-image-width
مقدار پیش فرض	1
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.borderImageWidth="20px