English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل CSS

قواعد CSS (RULES)

مجلة خصائص CSS

استخدام خاصية border-image-repeat في CSS3 ومراجعة أمثلة

تحدد خاصية border-image-repeat في CSS3 كيفية تقليل أو تكرار الجزء الوسط من صورة الحدود لتناسب حجم الحدود.

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

القيمة الافتراضية:التمدد
يُستخدم ل:

لجميع العناصر، ولكن عند قيمة الخاصية border-collapse للعناصر الجدولية (مثل tr,th,td) كـ collapse، لا يتم تطبيق خاصية border-image-repeat.
يُستخدم أيضًا::first-letter.

الوراثة:لا يوجد
يمكن تحريكه:لايرجى الرجوع إلى خصائص التحريك.
الإصدار:ميزة CSS3 الجديدة
نحو JavaScript: 　　　object.style.borderImageRepeat = "round"

استخدام نحو border-image-repeat

نموذج هذا الخصائص كالتالي:

border-image-repeat:　[　stretch　|　repeat　|　round　|　space　]　1　or　2　values　|　initial　|　inherit

المثال أدناه يعرض كيفية استخدام خاصية border-image-repeat.

.box　{
　　　　العرض:　300px;
　　　　الارتفاع:　150px;
　　　　حافة:　15px　مستقيم　شفاف;
　　　　border-image-source:　url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat:　round;
}
اختبار‹/›

قيمة الخاصية

جدول أدناه يصف القيم الخاصة بهذه الخاصية.

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

تطابق المتصفحات

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

  • Firefox 15+

  • Google Chrome15+

  • Internet Explorer 11+

  • Apple Safari 6+

  • Opera 15+

قراءة إضافية

يرجى الرجوع إلى الدليل:حافة CSS3,حافة CSS.

خصائص مرتبطة:حافة-صورة,حافة-صورة-المصدر,حافة-صورة-قطع,حافة-صورة-العرض,حافة-صورة-الخارجية,حافة.

خصائص قطع صورة الحدود لـ CSS3خصائص نزول صورة الحدود لـ CSS3