۱۳ – gradient و border-image در CSS

۱. گرادیانت‌ها (Gradients)

• linear-gradient: گرادیانت خطی با زاویه یا جهت مشخص
• repeating-linear-gradient: گرادیانت خطی تکرار شونده
• radial-gradient: گرادیانت شعاعی (دایره‌ای یا بیضوی)
• repeating-radial-gradient: گرادیانت شعاعی تکرار شونده

نکته: می‌توان از رنگ‌های RGBA برای شفافیت استفاده کرد.

۲. border-image

• استفاده از تصویر به جای رنگ ساده برای حاشیه
• قبل از border-image باید یک border تعریف شود (معمولاً شفاف)
• پراپرتی‌های مهم:
  • border-image-source → مسیر تصویر
  • border-image-slice → میزان برش تصویر برای گوشه‌ها
  • border-image-repeat → نحوه تکرار (stretch, repeat, round, space)
  • border-image-width → عرض تصویر حاشیه
• نوشتن کوتاه همه پراپرتی‌ها با هم:

border-image: url(border.png) 30 space;

• نکته‌ها:
  • space فاصله بین تکرار تصویر می‌دهد
  • round تصویر را به اندازه مساوی برای کل حاشیه تکرار می‌کند