CSS conic-gradient() فونکشن

تعریف اور استعمال

CSS کا conic-gradient() فونکشن ناقص گنبدی درجہ حرارت کو پس منظر تصویر میں سے مقرر کرتی ہے.

ناقص گنبدی درجہ حرارت، مرکز نقطے کے اطراف میں چرخنے والی رنگ کی تبدیلی کا درجہ حرارت ہے (مثلاً ناقص چاندی اور رنگ چک).

ناقص گنبدی درجہ حرارت بنانے کے لئے کم از کم دو رنگ کی رکاوٹوں کو معین کرنا ہوگاً.

ناقص گنبدی درجہ حرارت مثال:

مثال

مثال 1

تین رنگوں کا حامل ناقص گنبدی درجہ حرارت:

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

亲自试一试

مثال 2

پانچ رنگوں کا حامل ناقص گنبدی درجہ حرارت:

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

亲自试一试

مثال 3

تین رنگوں کا حامل اور ہر رنگ کا زاویہ معین کرنے والا ناقص گنبدی درجہ حرارت:

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

亲自试一试

مثال 4

ذریعہ اضافہ کرکے border-radius: 50% کے ذریعہ ناقص گنبدی درجہ حرارت کا نمائش دیکھائیں گا:

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

亲自试一试

例子 5

带有起始角度的锥形渐变：

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

亲自试一试

例子 6

带有中心位置的锥形渐变：

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

亲自试一试

例子 7

同时带有起始角度和中心位置的锥形渐变：

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

亲自试一试

例子 8

另一个饼图示例：

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

亲自试一试

CSS 语法

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

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای اولین مرجع پشتیبانی از این فنکشن هستند.

صفحات مرتبط

تدریس:CSS گرادیان

مطالعه:سی ایس ایس بیک گراؤنڈ آئیمج خصوصیات

مطالعه:CSS linear-gradient() فنکشن

مطالعه:CSS radial-gradient() فنکشن

مطالعه:CSS repeating-conic-gradient() فنکشن

مطالعه:CSS repeating-linear-gradient() فنکشن

مطالعه:CSS repeating-radial-gradient() فنکشن