CSS Border Images
ویژگی border-image
این امکان رو میده که به جای یک خط ساده برای border، از یک تصویر استفاده کنیم.
این قابلیت خیلی در طراحیهای خاص (مثل کارتها، قاب عکس، دکمههای فانتزی و …) کاربرد داره.
✨ سینتکس کلی
🔹 ۱. خاصیت border-image-source
این ویژگی منبع تصویر رو مشخص میکنه:
🔹 ۲. خاصیت border-image-slice
این ویژگی مشخص میکنه تصویر از کجا برش بخوره.
(با استفاده از پیکسل یا درصد)
📌 یعنی تصویر به ۹ بخش تقسیم میشه: چهار گوشه، چهار ضلع، و وسط.
🔹 ۳. خاصیت border-image-repeat
نحوهی تکرار تصویر در لبهها رو مشخص میکنه:
-
stretch
→ کشیده میشه (پیشفرض) -
repeat
→ تکرار میشه -
round
→ تکرار میشه و اگر جا اضافی بمونه مقیاس تغییر میکنه -
space
→ تکرار میشه ولی فاصله بین تکرارها اضافه میشه
مثال:
🔹 ۴. خاصیت border-image-width
عرض تصویر مرزی رو مشخص میکنه (اختیاریه).
🔹 ۵. نوشتن به صورت کوتاه (Shorthand)
📌 ترتیب:
border-image: source slice repeat;
✅ نکات مهم
-
همیشه باید یه border (مثلاً
solid transparent
) تعریف بشه. -
border-image-slice
مهمترین بخشه چون تعیین میکنه کجا تصویر بریده بشه. -
بیشتر در طراحیهای خاص و تزئینی استفاده میشه.