انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: الإطارات الصور في لغة CSS

CSS Border Image الإطارات الصور في لغة CSS

سوف تتعلم في هذا الدرس طريقة عمل الإطارات بالصور بدلاً من الألوان في لغة CSS لتعطي شكلاً جمالياً.

1 صفوف تعليمية
لغة CSS
5,972 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تستخدم خاصية border-image في لغة CSS لإضافة إطار صورة بدلاً من الإطارات الألوان حول العنصر وهي إختصار لمجموعة خصائص وهم:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat


قيم خاصية border-image في لغة CSS:

  • source slice width outset repeat وهي تحديد قيم الخصائص السابقة.


ترتيب القيم:

  • source: رابط الصورة.
  • slice تحديد من أين يتم قطع الصورة.
  • width عرض الإطار.
  • outset بعد الإطار نسبة للمحتوى الداخلي للعنصر.
  • repeat تكرار إطار الصوره.

CSS border-image syntac

طريقة كتابة خاصية border-image في لغة CSS.

HTML 
border-image:value;

CSS border-image values

قيم خاصية border-image في لغة CSS.

HTML 
border-image:source slice width outset repeat|initial|inherit;

جميع فقرات هذا الدرس (الإطارات الصور في لغة CSS)