دليل المراجعة الخاصة بـ CSS

خصائص CSS

CSS repeating-radial-gradient() الوظيفة هي تكرار التدرج الدائري.

تدرج دائري	تدرج دائري مكرر

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

تدرج دائري مكرر:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

تدرج متكرر آخر للإشعاع الدائري، مع إعداد الشكل والحجم والموقع:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

تدرج متكرر آخر للإشعاع الدائري، مع إعداد نقطتي النهاية اللونية:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

القيمة	الوصف
shape	تحديد شكل التدرج. القيم الممكنة هي: ellipse (الافتراضي) circle
size	تحديد حجم التدرج. القيم الممكنة هي: farthest-corner (الافتراضي) closest-side closest-corner farthest-side
at position	تحديد موقع التدرج. القيمة الافتراضية هي "center".
start-color, ... , last-color	نقاط النهاية اللونية هي الألوان التي تريد أن يتم تقديمها فيها انتقال سلس. هذا القيمة تتكون من قيم الألوان وواحدة أو اثنتين من المواقع الخيارية للنهاية (نسبة مئوية بين 0% و100% أو طول على طول محور التدرج).