گرادیان شعاعی CSS (Radial Gradients)
«گرادیان شعاعی CSS» گذار رنگ را از یک نقطه مرکزی به اطراف ایجاد می کند. این گرادیان با تابع radial-gradient() ساخته می شود و برای رندر شدن به حداقل دو ایستگاه رنگ نیاز دارد.
تابع radial-gradient() در گرادیان شعاعی CSS
این تابع گرادیانی با شکل بیضی یا دایره می سازد. به طور پیش فرض شکل ellipse، اندازه farthest-corner و موقعیت center است.
/* Syntax */
selector { background-image: radial-gradient(<shape> <size> at <position>, <color-stop1>, ..., <color-stopN>); }نکته: برای جزئیات بیش تر، مستندات radial-gradient() را ببینید.
ایستگاه های رنگ با فاصله یکسان
در حالت پیش فرض، ایستگاه های رنگ به طور یکنواخت پخش می شوند.
#grad-even { background-image: radial-gradient(red, yellow, green); }ایستگاه های رنگ با فاصله دلخواه
برای کنترل محل گذار، درصد هر ایستگاه را مشخص کنید.
#grad-spaced { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }تعیین شکل گرادیان
پارامتر shape می تواند ellipse (پیش فرض) یا circle باشد.
#grad-circle { background-image: radial-gradient(circle, red, yellow, green); }پارامتر size در گرادیان شعاعی CSS
اندازه شکل پایانی گرادیان با کلیدواژه های closest-side، farthest-side، closest-corner و farthest-corner تعیین می شود.
#grad-size-1 { background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black); }
#grad-size-2 { background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black); }repeating-radial-gradient()
برای تکرار الگوی شعاعی از repeating-radial-gradient() استفاده کنید.
#grad-repeat { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }نکته: برای تکمیل مباحث، گرادیان خطی و گرادیان مخروطی را ببینید. همچنین مرجع repeating-radial-gradient() در MDN مفید است. اگر به دنبال مروری سریع هستید، همین صفحه گرادیان شعاعی CSS را نشانه گذاری کنید.