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

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

CSS‌ conic-gradient(); این تابع تغییرات زاویه‌ای كонусی را به عنوان تصویر پس‌زمینه تنظیم می‌کند.

تغییرات زاویه‌ای كонусی یک نوع تغییرات رنگی است که حول نقطه مرکزی چرخش می‌کند (مانند دایره و چرخه رنگ‌ها).

برای ایجاد تغییرات زاویه‌ای كонусی، باید حداقل دو نقطه توقف رنگ تعریف شود.

تغییرات زاویه‌ای كонусی با سه رنگ وجود دارد:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

تغییرات زاویه‌ای كонусی با پنج رنگ وجود دارد:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

تغییرات زاویه‌ای كонусی با سه رنگ و تعیین زاویه برای هر رنگ وجود دارد:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

با اضافه كردن border-radius: 50%، تغییرات زاویه‌ای كонусی به شكل يك دايره به نظر می‌رسد:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

توزیع زاویه‌ای با زاویه شروع:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

توزیع زاویه‌ای با مکان مرکز:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

توزیع زاویه‌ای با مکان مرکز و زاویه شروع:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

مثال دیگری از نیم‌دایره:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

background-image: conic-gradient([از زاویه][در موقعیت,] درجه رنگ, درجه رنگ, ...);

مقدار	توضیح
از زاویه	اختیاری. تمام توزیع زاویه‌ای به این زاویه می‌چرخد. مقدار پیش‌فرض 0deg است.
در موقعیت	اختیاری. مکان مرکز توزیع زاویه‌ای مشخص می‌کند. مقدار پیش‌فرض center است.
درجه رنگ, ..., درجه رنگ	نقطه توقف رنگ این مقدار از رنگ‌ها و مکان‌های توقف اختیاری (درجه‌ها بین 0 تا 360 درجه یا درصد بین 0% تا 100%) تشکیل شده است.

مقدار

توضیح

از زاویه

اختیاری. تمام توزیع زاویه‌ای به این زاویه می‌چرخد. مقدار پیش‌فرض 0deg است.

در موقعیت

اختیاری. مکان مرکز توزیع زاویه‌ای مشخص می‌کند. مقدار پیش‌فرض center است.

درجه رنگ, ..., درجه رنگ

نقطه توقف رنگ

این مقدار از رنگ‌ها و مکان‌های توقف اختیاری (درجه‌ها بین 0 تا 360 درجه یا درصد بین 0% تا 100%) تشکیل شده است.