توابع radial-gradient() در CSS

صفحه قبلی توابع pow() CSS
صفحه بعدی توابع ray() CSS
برگشت به لایه بالا دستورالعمل مرجع تابع 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);

مقدار	توضیح
shape	تعریف شکل تغییر رنگ. مقادیر ممکن: ellipse (پیش‌فرض) circle
size	تعریف اندازه تغییر رنگ. مقادیر ممکن: farthest-corner (پیش‌فرض) closest-side closest-corner farthest-side
position	تعریف موقعیت تغییر رنگ. مقدار پیش‌فرض "center" است.
start-color, ... , last-color	رنگ‌های نشان‌دهنده رنگ‌هایی هستند که می‌خواهید بین آن‌ها تغییرات پیوسته داشته باشید. این مقدار از یک مقدار رنگ تشکیل شده است، که پس از آن یک یا دو موقعیت نشان‌دهنده رنگ‌ها (درصد‌های 0% تا 100% یا طول در محور تغییر رنگ) قابل انتخاب است.