border-image

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

این ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد:

برای بررسی دقیق تر هریک از ویژگی های بالا لطفا به مطلب مربوط به آن مراجعه کنید.

وقتی یک حاشیه تصویری برای یک عنصر قرار است تنظیم شود, این عملیات در چند قدم انجام می شود:

قبل از هر چیز تصویری که توسط ویژگی border-image-source تعیین شده است, بوسیله ویژگی border-image-slice مانند تصویر زیر به نه قسمت تقسیم می شود, که قسمت ها شامل چهار گوشه, چهار لبه و یک قسمت مرکزی می باشند:

 
تقسیم بندی حاشیه تصویری در css
 

سپس تصاویر تکه شده, هر کدام برای ناحیه مربوط به خود از نظر مقیاس و مکان و چیدمان, با توجه به مراحل زیر آماده می شوند:

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

2. همچنین مقیاس تصاویر بر اساس مقادیری که به ویژگی border-image-repeat داده می شوند هم تنظیم می شود.

3. بعد از تعیین مقیاس, مکان تصویر تعیین می شود, که این کار نیز بر اساس مقادیر border-image-repeat انجام می شود.

4. در مرحله آخر چیدن تصاویر تکراری در کنار هم صورت می گیرد. که این کار نیز وابسته به مقادیری است که به ویژگی border-image-repeat داده می شود.

حاشیه تصویری می تواند به بیرون از سطح عنصر گسترش پیدا کند, و این کار توسط ویژگی border-image-outset انجام می شود.
 

درک مراحل بالا زمانی به درستی انجام می شود تا در عمل دیده شوند. ابزارهای زیر به این امر کمک می کنند:

مثال زیر نحوه مقدار دهی به تمام موارد را در این ویژگی نمایش می دهد:

 


.element {
  border-image: url(path/to/image.png) 25 40 25 40 / 30 40 30 40 / 30 space;
}

 

 

مثال

تصویر زیر را می خواهیم به عنوان حاشیه تصویری استفاده کنیم. ابعاد این تصویر 300 پیکسل در 300 پیکسل است. دایره ها با هم برابر هستند, یعنی اندازه هر کدام برابر 100 پیسکل است, پس برای اینکه بتوانیم به خوبی این تصویر را به 9 تکه تقسیم کنیم. کافی است مقدار ویژگی border-image-slice را 100 و یا 33.33 درصد تعیین کنیم.

 
ساخت border-image در css
 
سپس می توانیم بنا به طرحی که داریم عرض حاشیه تصویری را بوسیله ویژگی border-image-width تعیین کنیم. که ما در اینجا مقدار آن را برابر 30 پیکسل قرار می دهیم. بقیه مقادیر هم بنا به نیاز بصورت زیر تعیین می شوند:

 


.el {
  width: 400px;
  height: 200px; 
  border-image: url(ball-border-img.png) 100 100 / 30px 30px round; 
}

 

دموی زیر نتیجه کار را نشان می دهد:

 

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


 

در قالب مثالی دیگر, فرض کنید می خواهیم از تصویر زیر به عنوان حاشیه تصویری برای یک عنصر استفاده کنیم. همانطور که در تصویر زیر نشان داده شده است, این تصویر بر اساس مقدار ویژگی border-image-slice در فاصله 124 پیکسلی از لبه ها بریده شده و به نه قسمت تقسیم شده است:

 
برش تصویر برای حاشیه تصویری در css
 

در این مثال اگرچه که border-width برابر با 12 پیکسل است اما border-image-width تعیین کننده عرض حاشیه تصویری می باشد که در اینجا برابر با 124 پیکسل می باشد. همچنین حاشیه تصویری به اندازه 31 پیکسل به سمت ناحیه margin گسترش پیدا کرده است.

 
border image در css
 

اگر با ویژگی background-clip آشنایی ندارید به این مطلب مراجعه کنید.

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

دموی زیر با دقت بررسی کنید:

 

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


 

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

4 دیدگاه برای “border-image

  1. لطفا مقاله را تصحیح بفرمایید برای مثال در پاراگراف”سپس تصاویر تکه شده….” توضیحات کامل اما نام هایی که برایشان توضیح آوردید جابجا هستند مثلا چندین بار border-image-repeat را تکرار نمودید.

      1. نه استاد عرض کردم بخونید خخودتون متوجه میشید تکرارش اتباس چون repeat ربطی به مقیاس نداره
        اما استاد من همون روز درباره slice خیلی فکر کردم اما یه چیز فقط درک کردم که مطمئن نیستم
        میشه دقیق تر بفرمایید ینی چی این استایل،توضیحتون خوب بود اما نفهمیدم دقیقا چی میکنه به عکس
        ممنون از شما

پاسخ دادن به آمنه لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *