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

बॉर्डर-रेडियस: 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 position,] रंग डिग्री, रंग डिग्री, ...);

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

तालीमीय निर्देशCSS ग्रेडिएंट

संदर्भ:सीएसएस बैकग्राउंड-इमेज गुण

संदर्भ:CSS linear-gradient() फ़ंक्शन

संदर्भ:CSS radial-gradient() फ़ंक्शन

संदर्भ:CSS repeating-conic-gradient() फ़ंक्शन

संदर्भ:CSS repeating-linear-gradient() फ़ंक्शन

संदर्भ:CSS repeating-radial-gradient() फ़ंक्शन