CSS repeating-radial-gradient() फ़ंक्शन

वर्णन और उपयोग

CSS repeating-radial-gradient() फ़ंक्शन दोहरा रेडियल ग्रेडिएंट के लिए उपयोग करता है。

उदाहरणः

रेडियल ग्रेडिएंट दोहरा रेडियल ग्रेडिएंट
radial-gradient(red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);

इस्टेंस

उदाहरण 1

एक दोहरा रेडियल रेंडियल ग्रेडिएंटः

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

स्वयं को प्रयोग करें

उदाहरण 2

एक अन्य दोहरा रेडियल ग्रेडिएंट, आकार, आकृति और स्थान सेट करता है:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

स्वयं को प्रयोग करें

उदाहरण 3

एक अन्य दोहरा रेडियल ग्रेडिएंट, दो रंग अंत सेट करता है:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

स्वयं को प्रयोग करें

CSS व्याकरण

repeating-radial-gradient(shape size at position, start-color, ... , last-color);
मान वर्णन
shape

ग्रेडिएंट के आकार को परिभाषित करता है।संभावित मानों:

  • ellipse (मूलभूत)
  • circle
size

ग्रेडिएंट के आकार को परिभाषित करता है।संभावित मानों:

  • farthest-corner (मूलभूत)
  • closest-side
  • closest-corner
  • farthest-side
at position ग्रेडिएंट के स्थान को परिभाषित करता है।मूलभूत मान "center" है।
start-color, ... , last-color

रंग अंत आपके इस बीच सामान्य पारस्परिक पारित करने के लिए चाहते हैं का रंग है।

यह मान रंग मान और एक या दो वृद्धि स्थान (0% से 100% के बीच का प्रतिशत या ग्रेडिएंट अक्ष के लंबाई) से बना है।

तकनीकी विवरण

संस्करण: CSS इमेजेज़ मॉड्यूल लेवल 3

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

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

च्रोम एज फ़ायरफॉक्स सफारी ओपेरा
repeating-radial-gradient()
26 10 16 6.1 12.1
दो अवस्थानों का रंग अंत
71 79 64 12.1 58

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

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

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

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

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

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

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

संदर्भ:CSS रीपीटिंग-लीनियर-ग्रेडिएंट() फ़ंक्शन