خصوصیت border-image-width
مثال (خصوصیت border-image-width)
تعیین پهنای image-border (عکس حاشیه):
{
border-image-source: url(border.png);
border-image-width: 30 30;
}
پشتیبانی مرورگرها
هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-width را پشتیبانی نمی کنند.
می توانید به بیاموز border-image مراجعه نمایید.
تعریف و کاربرد
با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.
در واقع می توانید offset را برای 9 بخش زیر تعیین نمایید:
- گوشه بالا - چپ
- لبه بالا
- گوشه بالا - راست
- لبه راست
- گوشه پایین - راست
- لبه پایین
- گوشه پایین - چپ
- لبه چپ
- ناحیه وسط عکس
بعبارتی border-image-width، فاصله داخلی 9 ناحیه ذکر شده از لبه بالا، راست، پایین و چپ است.
| مقدار پیشفرض | 1 |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.borderImageWidth="30 30" |
نحوه استفاده
توجه: این خصوصیت فاصله حاشیه داخلی (offset) از بالا، راست، پایین و چپ عکس اصلی را مشخص می کند و همانطور که در مثال زیر مشاهده می کنید عکس اصلی را به 9 ناحیه تقسیم می کند (4 تا گوشه، 4 تا لبه و 1 فضای وسط عکس). فضای وسط عکس حذف خواهد شد مگر اینکه از کلمه کلیدی "fill" استفاده نمایید.
این خصوصیت می تواند از یک تا چهار مقدار داشته باشد (مانند خصوصیت border-image-slice) و ترتیب مقادیر بصورت top و right و bottom و left است. شما می توانید از واحدهای درصد یا پیکسل استفاده کنید.
اگر مقدار چهارم قلم گرفته شود، با مقدار دوم تنظیم خواهد شد، اگر مقدار سوم قلم گرفته شود با مقدار اول تنظیم می شود و اگر مقدار دوم قلم گرفته شود با مقدار اول تنظیم می شود. مقادیر منفی قابل قبول نیست.
اگر عرض برای border تنظیم نشده باشد خصوصیت border-image اثری نخواهد داشت. برای مرورگرهایی که border-image را پشتیبانی می کنند، تکه های تصویرتان در عرض مشخص شده مقیاس می گیرند.
مثال:
border-image-source: url(/pix/css/css3/properties/border-image-1.png);
border-image-slice: 28;
border-image-width: 0.5em 1.0em;
border-image-outset: 0;
border-image-repeat: round;
در مثال بالا،
- گوشه بالا - چپ
- لبه بالا
- گوشه بالا - راست
- لبه راست
- گوشه پایین - راست
- لبه پایین
- گوشه پایین - چپ
- لبه چپ
- ناحیه وسط عکس
| مقدار | توضیحات |
|---|---|
| number |
تعداد تکرار border-width مربوطه را نشان می دهد. |
| % |
به سایز تصویر حاشیه اشاره دارد. |
| auto |
border-image-source: url(/pix/css/css3/properties/border-image-1.png);
border-image-slice: 28;
border-image-width: 0.5em 1.0em;
border-image-outset: 0;
border-image-repeat: round;
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7108
