border-image

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

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

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

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

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

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

 

 

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

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

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

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

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

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

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

• lea.verou.me/border-image
• Border Image Generator
• Grokking CSS3 border-image

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

 

.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-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 پیکسلی از لبه ها بریده شده و به نه قسمت تقسیم شده است:

 

 

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

 

 

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

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

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

 

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

 

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