सीएसएस शंकु-ढाल () समारोह
उदाहरण
तीन रंगों वाला एक शंक्वाकार ढाल:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
शंकु-ढाल () फ़ंक्शन पृष्ठभूमि छवि के रूप में एक शंकु ढाल सेट करता है।
एक शंकु ढाल एक केंद्र बिंदु के चारों ओर घुमाए गए रंग संक्रमण के साथ एक ढाल है।
एक शंकु ढाल बनाने के लिए आपको कम से कम दो रंग स्टॉप को परिभाषित करना होगा।
शंकु ढाल का उदाहरण:
संस्करण: | CSS3 |
---|
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो फ़ंक्शन का पूर्ण समर्थन करता है।
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
सीएसएस सिंटेक्स
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
और ज्यादा उदाहरण
उदाहरण
पांच रंगों वाला एक शंक्वाकार ढाल:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
उदाहरण
तीन रंगों के साथ एक शंकु ढाल और प्रत्येक रंग के लिए एक डिग्री:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
उदाहरण
सीमा-त्रिज्या जोड़कर शंकु ढाल को पाई की तरह बनाएं: 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%;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ग्रेडिएंट्स