CSS रेडियल-ग्रेडिएंट () फ़ंक्शन
उदाहरण
समान दूरी वाले रंग के साथ एक रेडियल ग्रेडिएंट रुक जाता है:
#grad {
background-image: radial-gradient(red, green, blue);
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
रेडियल-ग्रेडिएंट () फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है।
एक रेडियल ग्रेडिएंट को इसके केंद्र द्वारा परिभाषित किया जाता है।
रेडियल ग्रेडिएंट बनाने के लिए आपको कम से कम दो रंग स्टॉप को परिभाषित करना होगा।
रेडियल ग्रेडिएंट का उदाहरण:
संस्करण: | CSS3 |
---|
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो फ़ंक्शन का पूर्ण समर्थन करता है।
-वेबकिट-, -मोज़-, या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Function | |||||
---|---|---|---|---|---|
radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
सीएसएस सिंटेक्स
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Value | Description |
---|---|
shape | Defines the shape of the gradient. Possible values:
|
size | Defines the size of the gradient. Possible values:
|
position | Defines the position of the gradient. Default is "center" |
start-color, ..., last-color | 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 percentage between 0% and 100% or a length along the gradient axis). |
और ज्यादा उदाहरण
उदाहरण
अलग-अलग दूरी वाले रंग के साथ एक रेडियल ग्रेडिएंट रुक जाता है:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
उदाहरण
एक वृत्त के आकार के साथ एक रेडियल ढाल:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
उदाहरण
विभिन्न आकार के कीवर्ड के साथ एक रेडियल ग्रेडिएंट:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ग्रेडिएंट्स