CSS Border Images

ویژگی Border Image در CSS این امکان را می‌دهد که به‌جای رنگ یا خط ساده، برای کادر (border) یک تصویر استفاده کنیم.

📌 ساختار کلی

selector {
border: 10px solid transparent; /* باید border داشته باشد */
border-image-source: url(‘border.png’); /* آدرس تصویر */
border-image-slice: 30; /* برش تصویر (px, %) */
border-image-repeat: stretch; /* نحوه تکرار: stretch | repeat | round | space */
}

🎨 مثال ساده

.box {
border: 20px solid transparent;
border-image-source: url(“frame.png”);
border-image-slice: 40; /* برش از لبه‌ها */
border-image-repeat: round; /* تکرار به صورت موزاییکی */
}

📌 شورت‌هند (یک‌خطی)

می‌توان همه ویژگی‌ها را در یک خط نوشت:

.box {
border: 15px solid transparent;
border-image: url(“pattern.png”) 30 round;
}

📌 توضیح border-image-slice

این ویژگی مشخص می‌کند تصویر چگونه به ۹ بخش تقسیم شود:

• وسط → داخل عنصر کشیده می‌شود یا حذف می‌شود (بسته به تنظیمات).

• ۴ گوشه → همان‌طور استفاده می‌شوند.

• ۴ لبه → کشیده یا تکرار می‌شوند.

📌 مثال با گرادیان (بدون تصویر فایل)

می‌توان از گرادیان هم به‌عنوان border-image استفاده کرد:

.box {
border: 12px solid transparent;
border-image: linear-gradient(45deg, #ff0000, #0000ff) 1;
}

✅ نکته: همیشه باید border داشته باشید (حتی شفاف) وگرنه border-image اعمال نمی‌شود.