इस पेज का अनुवाद Cloud Translation API से किया गया है.

कूल बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का इस्तेमाल करें

कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, कॉनिक ग्रेडिएंट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, यह अच्छा बॉर्डर का उदाहरण.

इस CodePen को एडम ने बनाया है Argyle ने इसे सबसे पहले इसके ज़रिए शेयर किया Twitter पर ट्वीट करें, दिखाता है कि शांकव को कैसे इस्तेमाल किया जाता है ग्रेडिएंट से बॉर्डर बनाएं.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

टेरी मुन की क्रिएटिविटी फ़ोर्क किया गया एडम के कोडपेन ने इसे बनाया है CodePen. अपने माउस को एलिमेंट को कॉपी करने के लिए, आपको ग्रेडिएंट में बदलाव दिखेगा, क्योंकि इसमें थोड़ी सी JavaScript की मदद से ऐसी सीएसएस कस्टम प्रॉपर्टी अपडेट करना जिसमें रोटेशन ऐंगल सेव किया जाता है.

इन उदाहरणों में border-image-source प्रॉपर्टी. यह प्रॉपर्टी, किसी एलिमेंट को बनाने के लिए इस्तेमाल की जाने वाली सोर्स इमेज को सेट करती है बॉर्डर. इमेज की वैल्यू स्वीकार करने वाली अन्य प्रॉपर्टी की तरह, किसी भी सीएसएस ग्रेडिएंट प्रकार भी मान्य है.

`border-image-source`

ब्राउज़र सहायता

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

शंकु ग्रेडिएंट

ब्राउज़र सहायता

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स