फ़ंक्शन repeating-radial-gradient

फ़ंक्शन repeating-radial-gradient एक दोहराव वाला रेडियल ग्रेडिएंट सेट करता है। इसका मतलब है कि हम ग्रेडिएंट का एक निश्चित पैटर्न सेट करते हैं, उदाहरण के लिए, 0px से 10px तक - लाल से नीले रंग में ग्रेडिएंट और यह ग्रेडिएंट पूरे ब्लॉक में दोहराया जाएगा: 0px से 10px, 10px से 20px तक, 20px से 30px तक और इसी तरह आगे भी।

फ़ंक्शन उन्हीं पैरामीटर्स के साथ काम करता है, जो radial-gradient के साथ हैं, अंतर केवल दोहराव के प्रभाव में है। स्वीकृत पैरामीटर्स radial-gradient के विवरण में देखें।

सिंटैक्स

cssसिलेक्टर {
  background: repeating-radial-gradient([आकृति प्रकार स्थिति], रंग1 आकार1, रंग2 आकार2...);
}

उदाहरण

संकेंद्रित वृत्त:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

उदाहरण

संकेंद्रित दीर्घवृत्त:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

उदाहरण

संकेंद्रित वृत्तों को केंद्र में नहीं, बल्कि किनारे पर रखें:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

यह भी देखें