وظيفة 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

参考：CSS background-image 属性

参考：فنكاليفردية متوازية

参考：فنكاليفردية خطية

参考：فنكاليفردية متكررة متوازية

参考：فنكاليفردية متكررة خطية

参考：CSS repeating-radial-gradient() 函数