Border Image

جایگزینی خط ساده با تصویر: Border Image

در درس قبل با Border معمولی آشنا شدیم که از خطوط ساده (مثل solid یا dashed) تشکیل می‌شه. اما CSS ابزاری هم داره که اجازه می‌ده به‌جای یک خط ساده، از یک تصویر واقعی به‌عنوان بوردر دور یک جعبه استفاده کنیم؛ این ابزار Border Image نام داره.

border-image چیست؟

Property به اسم border-image یک تصویر رو می‌گیره و اون رو، به‌جای رنگ و سبک ساده، دور جعبه می‌کشه. این تصویر می‌تونه یک الگوی تزئینی، یک بافت (Texture) یا حتی یک Gradient باشه.

پیش‌نیاز: تعریف border-style و border-width

.box {
  border: 20px solid transparent;
  border-image: url("border-pattern.png") 30 round;
}

نکته مهم: border-image جایگزین رنگ و سبک بوردر می‌شه، ولی همچنان به یک border-width و معمولاً یک border-style (حتی اگه در نهایت دیده نشه، مثل solid) نیاز داره تا مرورگر بدونه بوردر باید چه ضخامتی داشته باشه. به همین دلیل، معمولاً border-color رو transparent می‌ذاریم؛ چون قراره تصویر جایگزینش بشه.

ساختار Syntax کامل border-image

border-image: منبع اسلایس عرض آفست تکرار;

این شورت‌هند از چند بخش تشکیل شده که هرکدوم رو جداگانه می‌بینیم.

border-image-source: منبع تصویر

.box {
  border-image-source: url("frame.png");
}

مشخص می‌کنه کدوم فایل تصویر به‌عنوان بوردر استفاده بشه؛ دقیقاً مثل background-image، با تابع url().

border-image-slice: برش تصویر به نه بخش

.box {
  border-image-slice: 30;
}

این بخش، شاید مفهومی‌ترین و در عین حال گیج‌کننده‌ترین قسمت Border Image باشه. تصویر منبع، به‌طور مفهومی به نه بخش تقسیم می‌شه: چهار گوشه، چهار لبه (بالا، پایین، چپ، راست) و یک بخش مرکزی.

┌───┬─────────┬───┐
│ ۱ │    ۲    │ ۳ │
├───┼─────────┼───┤
│ ۴ │    ۵    │ ۶ │
├───┼─────────┼───┤
│ ۷ │    ۸    │ ۹ │
└───┴─────────┴───┘

مقدار border-image-slice: 30 یعنی: از هر چهار طرف تصویر منبع، ۳۰ پیکسل رو به‌عنوان مرز برش در نظر بگیر. چهار گوشه (که در تصویر بالا با شماره ۱، ۳، ۷، ۹ مشخص شدن) بدون تغییر، مستقیماً در گوشه‌های جعبه قرار می‌گیرن؛ چهار لبه (۲، ۴، ۶، ۸) در طول هر ضلع کشیده یا تکرار می‌شن؛ و بخش مرکزی (۵)، به‌طور پیش‌فرض، اصلاً نمایش داده نمی‌شه (مگر با کلیدواژه fill که در ادامه می‌بینیم).

border-image-width: عرض نمایش بوردر

.box {
  border-image-width: 20px;
}

مشخص می‌کنه بخش‌های برش‌خورده تصویر، با چه عرضی دور جعبه نمایش داده بشن؛ این مقدار می‌تونه با border-width معمولی متفاوت باشه.

border-image-repeat: رفتار لبه‌ها

.stretch {
  border-image-repeat: stretch;
}

.round {
  border-image-repeat: round;
}

.repeat {
  border-image-repeat: repeat;
}

مقدار	رفتار
stretch	بخش‌های لبه، برای پر کردن طول ضلع، کشیده می‌شوند (پیش‌فرض)
repeat	بخش‌های لبه، بدون کشیدگی، تکرار می‌شوند؛ ممکن است در انتها بریده شوند
round	مشابه repeat، ولی اندازه لبه‌ها به‌طور خودکار تنظیم می‌شود تا دقیقاً به تعداد کامل جا شوند

fill: نمایش بخش مرکزی

.box {
  border-image-slice: 30 fill;
}

همون‌طور که اشاره شد، بخش مرکزی تصویر (قسمت ۵ در نمودار)، به‌طور پیش‌فرض نمایش داده نمی‌شه. با اضافه کردن کلیدواژه fill بعد از مقدار Slice، این بخش مرکزی هم، مثل یک background-image، در پس‌زمینه ناحیه Content ظاهر می‌شه.

یک مثال کامل با شورت‌هند

.fancy-frame {
  border: 25px solid transparent;
  border-image: url("ornate-frame.png") 40 round;
}

در این مثال، یک تصویر قاب تزئینی، با ۴۰ پیکسل برش از هر طرف، دور جعبه کشیده می‌شه؛ و لبه‌ها به‌جای کشیده شدن، به‌صورت round (تکرار هوشمند) تکرار می‌شن تا از کشیدگی نامتناسب الگوی تزئینی جلوگیری بشه.

کاربرد ساده‌تر: Gradient به‌عنوان Border Image

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, coral, gold) 1;
}

یکی از کاربردهای رایج‌تر و ساده‌تر border-image، استفاده از یک Gradient (که در درس قبل دیدیم) به‌جای یک تصویر واقعی است. چون Gradient خودش یک تصویر تولیدشده توسط مرورگره، می‌شه مستقیماً به‌عنوان منبع border-image استفاده بشه. مقدار 1 بعد از Gradient، همون border-image-slice است.

چرا border-image نسبت به border معمولی کمتر استفاده می‌شود؟

با اینکه border-image امکانات بصری جالبی فراهم می‌کنه، به‌خاطر پیچیدگی نسبی Syntax (مخصوصاً درک مفهوم Slice) و همچنین به‌خاطر اینکه border-radius (که در درس قبل دیدیم) روی border-image اثر نمی‌ذاره، این Property نسبت به بوردر معمولی، کاربرد بسیار محدودتری در پروژه‌های واقعی داره؛ عمدتاً برای جلوه‌های تزئینی خاص یا قاب‌های گرافیکی سفارشی به‌کار می‌ره.

نکات مهم

• border-image نیاز به یک border-width از پیش تعریف‌شده دارد تا بداند بوردر چه ضخامتی باید داشته باشد.
• border-image-slice تصویر منبع را به‌طور مفهومی به نه بخش تقسیم می‌کند: چهار گوشه، چهار لبه و یک مرکز.
• border-radius هیچ تأثیری بر روی border-image ندارد.

اشتباهات رایج

• فراموش کردن تعریف border-width یا border-style، که باعث می‌شود border-image اصلاً قابل‌مشاهده نباشد.
• انتظار داشتن گرد شدن گوشه‌های border-image با border-radius، در حالی که این دو Property مستقل از هم عمل می‌کنند.
• عدم توجه به تفاوت stretch و round در border-image-repeat، که می‌تواند باعث کشیدگی نامتناسب الگوهای تزئینی شود.

جمع‌بندی

Property به اسم border-image امکان استفاده از یک تصویر (یا حتی یک Gradient) را، به‌جای یک خط ساده، به‌عنوان بوردر دور یک جعبه فراهم می‌کند. این تصویر با border-image-slice به نه بخش تقسیم می‌شود که هرکدام (گوشه‌ها، لبه‌ها و مرکز) رفتار متفاوتی در نمایش دارند. به‌خاطر پیچیدگی نسبی و عدم سازگاری با border-radius، این Property بیشتر برای جلوه‌های تزئینی خاص به‌کار می‌رود، نه به‌عنوان جایگزین رایج بوردر معمولی.