CSS/repeating-radial-gradient

الدالة repeating-radial-gradient()‎ في CSS  تُنشِئ صورةً تحتوي على تدرجات لونية مكررة على شكل أشعة تبدأ من المبدأ، وهي شبيهة بالدالة radial-gradient()‎ وتأخذ نفس الوسائط، لكنها تُكرِّر محطات التوقف اللوني في جميع الجهات إلى ما لا نهاية، والنتيجة هي كائن من نوع البيانات <gradient> الذي هو نوعٌ خاصٌ من <image>.

/* تدرج لوني مُكرَّر يبدأ من مركز العنصر
   يبدأ باللون الأحمر ثم يتحول إلى أزرق ثم ينتهي بالأخضر */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.

عند كل تكرر، ستتحرك مواضع التوقف اللوني بأضعاف طول التدرج اللوني الأساسي (أي المسافة بين أوّل وآخر محطة توقف لوني)، وبالتالي سيكون موضع آخر محطة توقف لوني متوافقة مع أوّل محطة توقف لوني، وإذا كان لون البداية ولون النهاية مختلفَين، فسينتج انتقال غير تدريجي (حاد) بين اللونين.

لمّا كانت التدرجات اللونية تنتمي إلى نوع البيانات <image>، فيمكن استخدامها حيث يمكن استخدام نوع البيانات <image>، ولهذا السبب لا يمكن استخدام الدالة repeating-radial-gradient()‎ مع الخاصية background-color وغيرها من الخاصيات التي تستعمل نوع البيانات <color>.

أمثلة

مثال عن تدرج لوني شعاعي يكرر اللونين الأبيض والأسود:

body {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

مثالٌ آخر يكون الشكل النهائي للتدرج اللوني هو قطع ناقص:

body {
  background: repeating-radial-gradient(ellipse farthest-corner,
      red, black 5%, blue 5%, green 10%);
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	10.0 (مع السابقة -webkit-) 26.0	3.6 (مع السابقة -moz-) 16.0	10.0	12.1	5.1 (مع السابقة -webkit-) 6.0

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

القيمة <position>

موضع التدرج اللوني، وتُحدَّد هذه القيمة كما في الخاصية background-position أو transform-origin، وإذا لم تُحدَّد فالقيمة الافتراضية هي center.

القيمة <shape>

الشكل النهائي للتدرج الوني، ويمكن أن تكون مساويةً إلى circle (وهذا يعني أنَّ شكل التدرج النهائي هو دائرة نصف قطرها ثابت)، أو ellipse (وهذا يعني أنَّ الشكل النهائي هو قطع ناقص)، وإذا لم تُحدَّد فالقيمة الافتراضية هي ellipse.

القيمة <extent-keyword>

هذه الكلمة المحجوزة تصف حجم الشكل النهائي للتدرج اللوني، ويُسمَح باستخدام الكلمات المحجوزة الآتية:

الكلمة المحجوزة	الشرح
closest-side	يجب أن يلمس الشكل النهائي للتدرج اللوني الجانب الأقرب للمركز (للدوائر) أو كلا الجانبين الرأسي والأفقي الأقرب للمركز (للقطوع الناقصة).
closest-corner	يجب أن يلمس الشكل النهائي للتدرج اللوني أقرب ركن من المركز.
farthest-side	يجب أن يلمس الشكل النهائي للتدرج اللوني الجانب الأبعد للمركز (للدوائر) أو كلا الجانبين الرأسي والأفقي الأبعد للمركز (للقطوع الناقصة).
farthest-side	يجب أن يلمس الشكل النهائي للتدرج اللوني أبعد ركن من المركز.

ملاحظة: في الإصدارات القديمة من هذه الدالة كانت هنالك كلمات محجوزة مثل cover و contain التي تكافئ الكلمات المحجوزة المعيارية farthest-corner و closest-side على التوالي وبالترتيب، لكن لا تستعمل إلا الكلمات المعيارية، وإنما ذكرناها لتعرف بوجودها.

القيمة <color-stop>

قيمة لونيّة <color> يتبعها -اختياريًا- موضع التوقف، ويمكن أن يكون الموضع نسبةً مئويةً <percentage> أو طولًا مطلقًا <length>.

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

repeating-radial-gradient(
  [ [ circle || <length> ][ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+)

حيث:

<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]?

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

• مواصفة CSS Image Values and Replaced Content Module Level 3.