border-image-width

از ویژگی border-image-width برای کوچک یا بزرگ کردن اندازه تکه تصویرهایی که توسط ویژگی border-image-slice برای حاشیه تصویری تعیین شده اند, استفاده می شود.

این ویژگی به مرورگر می گوید که هر سمت حاشیه تصویری قرار است به چه اندازه عرض داشته باشد تا مرورگر بتواند حاشیه تصویری را به اندازه متناسب درآورد.

به ناحیه داخلی, که قرار است حاشیه تصویری درون آن ترسیم شود, ناحیه حاشیه تصویری (border image area) گفته می شود. بصورت پیشفرض مرزهای این ناحیه بر روی مرزهای عنصر (border box) قرار می گیرند مگر اینکه بوسیله ویژگی border-image-outset ناحیه حاشیه تصویری, گسترش پیدا کند.

تصویر زیر را در نظر بگیرید. ویژگی border-image-width با تعیین کردن چهار فاصله از مرزهای ناحیه حاشیه تصویری, اندازه این ناحیه را مشخص می کند.

 

 

ویژگی border-image-width می تواند چهار, سه, دو و یا یک مقدار داشته باشد.

 

border-image-width: 100px 125px 50px 125px; /* top right bottom left */
border-image-width: 100px 50px 125px; /* top=10 right=left=50px bottom=125px */
border-image-width: 100px 125px; /* top=bottom=100px right=left=125px */
border-image-width: 100px; /* top=bottom=right=left=100px */

 

اگر اندازه های دو سمتی که رو بروی هم هستند طوری تعیین شوند که آنقدر بزرگ باشند تا روی هم قرار بگیرند. مرورگر اندازه آنها را بصورت مناسب آنقدر کاهش می دهد تا دیگر روی هم قرار نداشته باشند.

تکه های بالا و پایین (E1 و E3) که توسط ویژگی border-image-slice تعیین شده اند, به اندازه ای بزرگ یا کوچک می شوند تا ارتفاع آنها با فاصله هایی که ویژگی border-image-width برای قسمت بالا و پایین در نظر گرفته است, مطابقت داشته باشد. و تکه های سمت چپ و راست (E4 و E2) نیز به اندازه ای در می آیند که عرض آنها با فاصله هایی که ویژگی border-image-width برای قسمت راست و چپ در نظر گرفته است, مطابقت داشته باشد.

در مرحله بعد عرض تکه های بالا و پایین و ارتفاع تکه های سمت چپ و راست, بر اساس مقدار ویژگی border-image-repeat دوباره متناسب سازی می شوند. می توانید برای جزییات بیشتر در مورد نحوه کار این ویژگی ها با هم به مطلب border-image مراجعه کنید.

عرض و ارتفاع گوشه ها نیز بر اساس عرض و ارتفاع تکه هایی مشخص شده تعیین می شود. مثلا گوشه بالا و سمت راست به اندازه ای در می آید که ارتفاعش با اندازه ای که border-image-width برای تکه بالایی در نظر گرفته است, منطبق شود. و به همین صورت عرضش با اندازه تکه سمت راست مطابقت داشته باشد.

در مورد قسمت مرکزی تصویر, اگر با توجه به ویژگی border-image-slice نادیده گرفته نشود و قرار باشد که به عنوان پس زمینه از آن استفاده شود. تغییر اندازه عرض آن بر اساس فاکتوری که برای لبه بالایی تعیین شده است انجام می شود. اگر لبه بالایی فاکتور صفر داشته باشد از لبه پایینی کمک خواهد گرفت. همچنین تغییر اندازه ارتفاع قسمت مرکزی بر اساس فاکتوری که برای لبه سمت چپ تعیین شده است انجام می شود. اگر لبه سمت چپ فاکتور صفر داشته باشد از لبه سمت راست کمک خواهد گرفت.

شاید در خیلی از منابع گفته شود که باید یا بهتر است که مقادیر border-image-width و border-image-slice را با هم برابر قرار دهید, اما می توانند این مقادیر متفاوت باشند. با توجه به تصویری که استفاده می کنید شاید ظاهری که دنبالش هستید با برابر قرار دادن مقادیر این ویژگی ها حاصل شود.

مقادیر این ویژگی می توانند مقادیری طولی مثل px و یا درصدی یا یک عدد بدون واحد باشند. همینطور کلمه کلیدی auto قابل قبول خواهد بود.

اگر از یک عدد بدون واحد ( مثلا X ) استفاده شود, به این معنی است که عرض حاشیه تصویری, X برابر border-width عنصر خواهد بود.

 

  border: 3px solid red;  
  border-image-width: 4; /* 4*3 = 12px */

 

وقتی از auto استفاده می شود, مرورگر اندازه را بر اساس عرض و یا ارتفاع ذاتی تکه مربوطه که در نتیجه مقادیر border-image-slice بدست آمده است, تعیین می کند. اگر چنین مقادیری فراهم نشده باشند اندازه border-image-width برابر با border-width عنصر خواهد بود.

موارد زیر صحیح هستند:

 

border-image-width: 30px;
border-image-width: 10% 30%;
border-image-width: auto;
border-image-width: auto 30px; 
border-image-width: 10px 20px 30px 25px;
border-image-width: 3;

 

در دمویی که در ادامه خواهید دید از تصویر زیر استفاده شده است:

 

 

کل تصویر 81 پیکسل در 81 پیکسل می باشد. هر لوزی 27 پیکسل در 27 پیکسل است. در دموی زیر عرض حاشیه تصویری برابر با 27 می باشد. با تغییر مقادیر با نحوه کار این ویژگی بیشتر آشنا شوید:

 

See the Pen border-image-width by Mojtaba Seyedi (@seyedi) on CodePen.

 

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