وظيفة radial-gradient() في CSS

التعريف والاستخدام

CSS radial-gradient() الوظيفة تعين تدرج الإصبعي كصورة الخلفية.

تدرج الإصبعي يتم تعريفه من خلال مركزه.

لإنشاء تدرج إصبعي، يجب تعريف على الأقل لونين.

مثال تدرج إصبعي:

مثال

مثال 1

توزيع التدرج الإصبعي المتساوٍ للنواقص اللونية:

#grad {
  background-image: radial-gradient(red, green, blue);
}

تجربة شخصية

مثال 2

توزيع التدرج الإصبعي المختلف للنواقص اللونية:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

تجربة شخصية

مثال 3

التدرج الراديي ذو الشكل الدائري:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

تجربة شخصية

مثال 4

استخدام كلمات الأساسي المختلفة لتحديد حجم التدرج径ي:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

تجربة شخصية

اللغة CSS

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

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة تمامًا لأول مرة.

الصفحات ذات الصلة

دليل:تدرج CSS

المرجع:خصائص background-image في CSS

المرجع:وظيفة CSS conic-gradient()

المرجع:وظيفة CSS linear-gradient()

المرجع:وظيفة CSS repeating-conic-gradient()

المرجع:وظيفة CSS repeating-linear-gradient()

المرجع:دالة CSS repeating-radial-gradient()