دليل مرجعي لـ CSS

قواعد CSS (RULES)

موسوعة الخاصيات CSS

خصائص مصدر صورة الحدود CSS3 خصائص تكرار صورة الحدود CSS3

طريقة استخدام خاصية border-image-slice في CSS3 ومثال

خصائص border-image-slice CSS ستحافة-صورة-مصدرسيتم تقسيم الصورة المحددة إلى تسع مناطق: أربعة زوايا وأربعة جوانب وواحدة في الوسط. يتم تحقيق ذلك من خلال تحديد أربعة مسافات داخلية، والتي تخلق عادة شبكة 3x3.

سيتم التخلص من الجزء الوسط من صورة الحدود وسنستخدمها نفسًا، ولكنbackground-imageإذا كان هناك مفتاح كلمة fill، فاستخدمه كصورة الخلفية.

الجدول أدناه يوضح كيفية استخدام هذه الخاصية و تاريخها من الإصدارات، بالإضافة إلى لغة الجرافيكية الخاصة بها في سكربتات جافا سكريبت.

القيمة الافتراضية:	100%
تنطبق على:	يمكن تطبيق هذه الخاصية على أي عنصر، ولكن عندما يكون قيمة الخاصية border-collapse لـ عنصر الجدول (مثل tr,th,td) هي collapse، فإن خاصية border-image-slice لا تنطبق. إنها تنطبق أيضًا على::first-letter。
الوراثة:	لا يوجد
يمكن تحريكه:	لايرجى الرجوع إلى خصائص التحرك。
الإصدار:	الميزات الجديدة لـ CSS3
لغة بايثون الجرافيكية:	عنصر.style.borderImageSlice="60% 60%"

نصغة استخدام حصة-صورة-قطع

نصغة هذه الخاصية هي:

حصة-صورة-قطع:　[عدد | نسبة مئوية] 1 إلى 4 قيم | ملء | البداية | تنسيق

السطر التالي يوضح كيفية استخدام خاصية حصة-صورة-قطع.

مثال

.box　{
　　　　العرض:　300px;
　　　　الارتفاع:　150px;
　　　　حافة:　15px　متساويةُ الشكلُ شفاف;
　　　　حافة-صورة-مصدر:　url("border.png");
　　　　حافة-صورة-قطع:　30;
　　　　حافة-صورة-تكرار:　دائرة;
}

التحقق من‹/›

قيمة الخاصية

جدول التالي يصف قيمة هذه الخاصية.

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

مستوى التطابق للمتصفحات

مستوى التطابق للمتصفحات الخاصة بحصة-صورة-قطع، الأرقام في الجدول التالي تعبر عن أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

	Firefox 15+ Google Chrome 15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

قراءة متعمقة

يرجى الرجوع إلى الدروس التالية:حافة CSS3وحافة CSS。

خصائص مرتبطة:حافة-صورة،حافة-صورة-مصدر،حافة-صورة-تكرار،حافة-صورة-عرض،حافة-صورة-نهاية،حافة。

خصائص مصدر صورة الحدود CSS3 خصائص تكرار صورة الحدود CSS3