سبد (0)

خصوصیت border-image-width

مثال (خصوصیت border-image-width)

تعیین پهنای image-border (عکس حاشیه):

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-width را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.


تعریف و کاربرد

با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.

در واقع می توانید offset را برای 9 بخش زیر تعیین نمایید:

  1. گوشه بالا - چپ
  2. لبه بالا
  3. گوشه بالا - راست
  4. لبه راست
  5. گوشه پایین - راست
  6. لبه پایین
  7. گوشه پایین - چپ
  8. لبه چپ
  9. ناحیه وسط عکس

بعبارتی border-image-width، فاصله داخلی 9 ناحیه ذکر شده از لبه بالا، راست، پایین و چپ است.

مقدار پیشفرض 1
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImageWidth="30 30"

نحوه استفاده

border-image-width: number|%|auto;

توجه: این خصوصیت  فاصله حاشیه داخلی (offset) از بالا، راست، پایین و چپ عکس اصلی را مشخص می کند و همانطور که در مثال زیر مشاهده می کنید عکس اصلی را به 9 ناحیه تقسیم می کند (4 تا گوشه، 4 تا لبه و 1 فضای وسط عکس). فضای وسط عکس حذف خواهد شد مگر اینکه از کلمه کلیدی "fill" استفاده نمایید.

 این خصوصیت می تواند از یک تا چهار مقدار داشته باشد (مانند خصوصیت border-image-slice) و ترتیب مقادیر بصورت top و right و bottom و left است. شما می توانید از واحدهای درصد یا پیکسل استفاده کنید.

اگر مقدار چهارم قلم گرفته شود، با مقدار دوم تنظیم خواهد شد، اگر مقدار سوم قلم گرفته شود با مقدار اول تنظیم می شود و اگر مقدار دوم قلم گرفته شود با مقدار اول تنظیم می شود. مقادیر منفی قابل قبول نیست.

اگر عرض برای border تنظیم نشده باشد خصوصیت border-image اثری نخواهد داشت. برای مرورگرهایی که border-image را پشتیبانی می کنند، تکه های تصویرتان در عرض مشخص شده مقیاس می گیرند.

مثال:

border-image-width: 0.5em 1.0em;

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;

در مثال بالا،

  1. گوشه بالا - چپ
  2. لبه بالا
  3. گوشه بالا - راست
  4. لبه راست
  5. گوشه پایین - راست
  6. لبه پایین
  7. گوشه پایین - چپ
  8. لبه چپ
  9. ناحیه وسط عکس
مقدارتوضیحات
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;

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان