التدرجات الشعاعية CSS
التدرجات الشعاعية CSS
يتم تحديد التدرج الشعاعي من خلال مركزه.
لإنشاء تدرج نصف قطري ، يجب أيضًا تحديد توقفي لوني على الأقل.
بناء الجملة
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
بشكل افتراضي ، يكون الشكل ناقصًا ، ويكون الحجم في أقصى زاوية ، والموضع هو المركز.
شعاعي متدرج - توقفات لونية متباعدة بشكل متساوٍ (هذا افتراضي)
يُظهر المثال التالي تدرجًا نصف قطريًا مع توقفات لونية متباعدة بشكل متساوٍ:
مثال
#grad {
background-image: radial-gradient(red, yellow, green);
}
تدرج شعاعي - توقفات لونية متباعدة بشكل مختلف
يُظهر المثال التالي تدرجًا شعاعيًا مع توقفات لونية متباعدة بشكل مختلف:
مثال
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
تعيين الشكل
تحدد معلمة الشكل الشكل. يمكن أن تأخذ دائرة القيمة أو القطع الناقص. القيمة الافتراضية هي القطع الناقص.
يوضح المثال التالي تدرجًا شعاعيًا على شكل دائرة:
مثال
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
استخدام كلمات مختلفة الحجم
تحدد معلمة الحجم حجم التدرج اللوني. يمكن أن يأخذ أربع قيم:
- أقرب جانب
- أبعد جانب
- أقرب ركن
- الزاوية الأبعد
مثال
تدرج شعاعي مع كلمات رئيسية مختلفة الحجم:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
تكرار التدرج الشعاعي
تُستخدم وظيفة التدرج الشعاعي المتكرر () لتكرار التدرجات الشعاعية:
مثال
تدرج شعاعي متكرر:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}