ايه وظيفة border-image-slice ؟

تستخدم الخاصية border-image-slice للتحكم في كيفية تقسيم صورة محددة بواسطة border-image-source إلى أقسام لإنشاء حدود عنصر بحيث يسمح ذلك بإنشاء حدود مزخرفة باستخدام صور مخصصة.

أما عن كيفية عملها فتنقسم الصورة مفهوميا إلى تسعة مناطق: أربع زوايا، وأربعة حواف (أضلاع)، ومنطقة مركزية أين تأخذ border-image-slice من واحد إلى أربعة قيم تحدد الإزاحة من حواف الصورة، وتحدد مكان إنشاء الشرائح وتستخدم هذه الشرائح لتشكيل الحدود العلوية والسفلية واليمنى واليسرى للعنصر.

لكن عادة ما يتم التعامل مع المنطقة المركزية على أنها شفافة، إلا إذا تم تضمين الكلمة الرئيسية fill.

يمكنك الاطلاع على هذه المقالة لمزيد من التفاصيل المفيدة عبر موسوعة حسوب: الخاصية border-image-slice

الحدود بالصور  border-image-slice في CSS تستخدم لتحديد كيفية تقسيم وتوزيع صورة الحدود حول العنصر.

الفكرة إن خاصية border-image-slice دي بتقسم الصورة الخاصه بك اللي انت محددها كحدود للعنصر، إلى شبكة 3 في 3، يعني 9 أجزاء. 4 زوايا، و4 أطراف، وواحد في النص.

المهم لما تحدد قيمة border-image-slice ، إنت بتقول للبراوزر يقطع الصورة من حوافها بالمسافات اللي انت محددها. يعني لو قلت
border-image-slice: 1 ، معناها هيقطع من كل ناحية وحدة واحدة من الصورة.

طيب لو الصورة بتاعتك مثلا تدرج لوني زي المثال، يبقى لما تقول border-image-slice: 1 ، ده معناه إنه هياخد وحدة واحدة من طرف الصورة ويطبقها كحدود للعنصر. 

فلو العنصر عندك input، وانت عاملها border-bottom بقيمة 5 بكسل، وبعدين حددت صورة التدرج ده في border-image-source ، فسيظهر الحد السفلي للinput فيه نفس ألوان التدرج اللوني ده بناء على القيمة اللي انت حددتها في border-image-slice.

ده بيديلك شكل حلو خالص وبيخلي الواجهة بتاعتك أكتر جمال وجاذبية، خصوصا في النماذج والمدخلات اللي انت عايز تلفت النظر ليها شوية.

فعشان كده المهندسين بيلجأوا لاستخدام الصور في الحدود علشان يضيفوا لمسات أنيقة وفنية على التصميم، بدل ما يستخدموا حدود عادية سوليد لونها واحد. كل ده بفضل الخاصايا الرهيبة دي في CSS.

يمكنك معرفه المزيد من  هنا