الفرق بين المراجعتين ل"CSS/border-image-repeat"

مراجعة 04:04، 19 مارس 2018

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

القيمة الابتدائية	`stretch`
تُطبَّق على	جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية `border-collapse` إلى `collapse`.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* border-image-repeat: type */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertical */
border-image-repeat: round stretch;

/* القيم العامة */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

أمثلة

راجع صفحة border-image لأمثلة عن هذه الخاصية.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	15.0	15.0	11	15	6
القيمة round	30	15.0	11	؟	9.1
القيمة space	56	50	11	غير مدعومة	9.1

البنية العامة

تقبل الخاصية border-image-repeat كلمة محجوزةً (لجميع الحواف) أو كلمتين محجوزتين (للحواف الأفقية والرأسية على حدة) من القيم الآتية:

`stretch`

تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تُغيّر أبعادها لتملأ الفراغ بين الإطارين.

`repeat`

تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين.

`round`

تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين. إذا لم تتسع الصورة بعد تكرارها لعدد صحيح من المرات، فسيتم تغيير أبعادها حتى تتسع.

`space`

تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين. إذا لم تتسع الصورة بعد تكرارها لعدد صحيح من المرات، فسيتم توزيع المسافة الفارغة بين التكرارات لملأ الفراغ.

البنية الرسمية

border-image-repeat: [ stretch | repeat | round | space ]{1,2};

انظر أيضًا

صفحة الخاصيات التي تضبطها الخاصية المختصرة border-image وهي: border-image-source، و border-image-slice، و border-image-width، و border-image-outset.
صفحة الخاصيات التي تضبطها الخاصية المختصرة border وهي: border-width، و border-style، و border-color.

مصادر ومواصفات

مواصفة CSS Backgrounds and Borders Module Level 3.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-repeat</code>}}</noinclude>
-الخاصية <code>border-image-repeat</code> في CSS تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أو يمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.<syntaxhighlight lang="css">
+الخاصية <code>border-image-repeat</code> في CSS تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أو يمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.
-/* border-image-repeat: type */
-border-image-repeat: stretch;
-/* border-image-repeat: horizontal vertical */
-border-image-repeat: round stretch;
-/* القيم العامة */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 29: / سطر 18: @@
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* border-image-repeat: type */
+border-image-repeat: stretch;
+/* border-image-repeat: horizontal vertical */
+border-image-repeat: round stretch;
+/* القيم العامة */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</syntaxhighlight>
 == أمثلة ==
 راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن هذه الخاصية.
@@ سطر 67: / سطر 66: @@
 تقبل الخاصية <code>border-image-repeat</code> كلمة محجوزةً (لجميع الحواف) أو كلمتين محجوزتين (للحواف الأفقية والرأسية على حدة) من القيم الآتية:
-=== القيمة <code>stretch</code> ===
+=== <code>stretch</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تُغيّر أبعادها لتملأ الفراغ بين الإطارين.
-=== القيمة <code>repeat</code> ===
+=== <code>repeat</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين.
-=== القيمة <code>round</code> ===
+=== <code>round</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين. إذا لم تتسع الصورة بعد تكرارها لعدد صحيح من المرات، فسيتم تغيير أبعادها حتى تتسع.
-=== القيمة <code>space</code> ===
+=== <code>space</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ الصورة يجب أن تتكرر حتى تملأ الفراغ بين الإطارين. إذا لم تتسع الصورة بعد تكرارها لعدد صحيح من المرات، فسيتم توزيع المسافة الفارغة بين التكرارات لملأ الفراغ.
@@ سطر 85: / سطر 84: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-image|border-image]]</code> وهي: <code>[[CSS/border-image-source|border-image-source]]</code>، و <code>[[CSS/border-image-slice|border-image-slice]]</code>، و <code>[[CSS/border-image-width|border-image-width]]</code>، و <code>[[CSS/border-image-outset|border-image-outset]]</code>.
+*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat CSS Backgrounds and Borders Module Level 3].