توابع radial-gradient() CSS

پچھلے صفحے CSS pow() فنکشن
آئندہ صفحہ CSS ray() فنکشن
ایک سطروں اوپر واپس سی ایس ایس فونکشن مراجع دستور زبان

تعریف و استفاده

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% یا طول در امتداد محور گرادیان).