خصائص قطع صور الحدود CSS

التعريف والاستخدام

يحدد خاصية border-image-slice الانحراف الداخلي للجوانب للصورة الحدودية.

يرجى الرجوع أيضًا إلى:

دليل CSS3:حافات CSS3

مثال

يحدد الانحراف الداخلي للجوانب للصورة الحدودية:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

جملة CSS

border-image-slice: number|%|fill;

ملاحظة:تحدد هذه الخاصية الانحراف الداخلي للجوانب العلوية واليمنى والسفلية واليسرى من الصورة، وتقسم الصورة إلى تسع مناطق: أربعة زوايا، أربعة جوانب، ومنطقة وسطية. ما لم يتم استخدام الكلمة المفتاحية fill، يتم التخلص من الجزء الوسط من الصورة. إذا تم تجاهل الرقم الرابع/النسبة المئوية، فإنه يكون نفسه كالنسبة الثانية. إذا تم تجاهل الرقم الثالث، فإنه يكون نفسه كالنسبة الأولى. إذا تم تجاهل النسبة الثانية، فإنه يكون نفسه كالنسبة الأولى.

قيمة الخاصية

القيمة الوصف
number قيمة عددية، تمثل بكسل الصورة (إذا كانت صورة شبكية) أو مسافات فيكتورية (إذا كانت صورة فيكتورية).
% نسبة مئوية مقارنة بمقياس الصورة: عرض الصورة يؤثر على التحرير الأفقي، وارتفاع الصورة يؤثر على التحرير العمودي.
ملء حفظ الجزء الوسط من صورة الحدود.

تفاصيل التقنية

القيمة الافتراضية: 100%
التنسيق: لا
الإصدار: CSS3
جافا سكريبت الجملة: object.style.borderImageSlice="50% 50%"

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

يرجى الرجوع border-image الخصائص。