سلام دوستان! امروز می‌خوایم یه نگاهی بندازیم به یکی از قابلیت‌های جالب در CSS که کمتر بهش توجه میشه: مرزهای تصویری یا همون border-image. خیلی از ما وقتی می‌خوایم به عناصر وب سایتمون ظاهر جالب‌تری بدیم، به سراغ border ساده میریم. اما با استفاده از border-image می‌تونیم طراحی‌های خلاقانه‌تری داشته باشیم.
مرزهای تصویری به ما این امکان رو میدن که به جای استفاده از یک رنگ ساده یا الگو، از یک تصویر به عنوان مرز استفاده کنیم. این قابلیت به خصوص زمانی مفیده که می‌خوایم سایتمون یه تم خاص و منحصر به فرد داشته باشه. می‌تونید از تصاویر تکراری یا تصاویر ثابت استفاده کنید، حتی می‌تونید تکه‌تکه کردن تصویر و بخش‌بندی اون رو کنترل کنید.
خب، شاید فکر کنید این موضوع پیچیده است، ولی اصلاً اینطور نیست. به نظرم برای درک بهترش خوبه که با یک مثال ساده شروع کنیم. در ادامه، یک مثال کاربردی از استفاده از border-image رو با هم می‌بینیم و خط به خط توضیح میدیم.
بدون معطلی، بریم سراغ مثال. فرض کنید یه باکس دارید و می‌خواید دورش یه تصویر به عنوان مرز بذارید. این کار مثل آب خوردنه!
مثال کد استفاده از border-image
div {
width: 300px;
height: 300px;
border: 10px solid transparent;
border-image: url('border-image.png') 30 round;
}
توضیح خط به خط مثال
div: این انتخابگر برای انتخاب تمام تگ‌های div توی داکیومنت استفاده میشه.width: 300px;: این خط عرض باکس ما رو 300 پیکسل مشخص می‌کنه.height: 300px;: این خط هم ارتفاع باکس ما رو 300 پیکسل تنظیم می‌کنه.border: 10px solid transparent;: اینجا یه مرز شفاف 10 پیکسلی تعیین می‌کنیم تا فضای کافی برای تصویر مرز داشته باشیم.border-image: url('border-image.png') 30 round;: این خط تصویر مرز رو تعیین می‌کنه و همچنین چگونگی برش و تکرار تصویر رو مشخص می‌کنه. 30 مقدار برش رو تعیین می‌کنه و round به این معنیه که تصویر در مرز به شکل تکراری نمایش داده بشه.