خصائص تكرار صورة الحدود CSS
- الصفحة السابقة border-image-outset
- الصفحة التالية border-image-slice
التعريف والاستخدام
يحدد خاصية border-image-repeat ما إذا كانت الصورة الحدودية يجب تكرارها (مكررة) أو تمددها (تمدد) أو تكسية (منحنية).
يرجى الرجوع أيضًا إلى:
دليل CSS3:حافات CSS3
مثال
تحديد كيفية تكرار صورة الحدود:
div { border-image-source: url(border.png); border-image-repeat: round; }
جافا سكريبت:
border-image-repeat: stretch|repeat|round;
ملاحظة:تعين هذه الخاصية كيفية امتداد وتوزيع حواف صورة الحدود والجزء الوسطي. لذلك، يمكنك تحديد قيمتين. إذا تم تجاهل القيمة الثانية، يتم اتخاذ نفس القيمة للقيمة الأولى.
قيمة الخاصية
القيمة | الوصف |
---|---|
stretch | تمدد الصور لملء المنطقة |
repeat | تكرار (تكرار) الصور لملء المنطقة. |
round | مثل قيمة repeat. إذا لم يتم تكسية جميع الصور بشكل كامل، يتم تقليل حجم الصور لتعديلها للمنطقة. |
تفاصيل التقنية
القيمة الافتراضية: | stretch |
---|---|
التنسيق الوراثي: | لا |
الإصدار: | CSS3 |
جافا سكريبت: | object.style.borderImageRepeat="round" |
دعم المتصفح
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
يرجى الرجوع إلى border-image خصائص.
- الصفحة السابقة border-image-outset
- الصفحة التالية border-image-slice