"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > सीएसएस का उपयोग करके जिम्मेदारी से दो अलग-अलग सीमाओं वाला एक वृत्त कैसे बनाएं?

सीएसएस का उपयोग करके जिम्मेदारी से दो अलग-अलग सीमाओं वाला एक वृत्त कैसे बनाएं?

2024-11-16 को प्रकाशित
ब्राउज़ करें:909

How to Create a Circle with Two Distinct Borders Responsively Using CSS?

दोहरी सीमाओं के साथ जिम्मेदारी से स्टाइलिंग सर्कल

सीएसएस सर्कल बनाना सीधा है, जैसा कि प्रदान किए गए कार्यशील सीएसएस द्वारा दिखाया गया है। हालाँकि, दो अलग-अलग सीमाओं के साथ एक वृत्त प्राप्त करने के लिए, हमें अतिरिक्त सीएसएस तकनीकों को नियोजित करने की आवश्यकता है।

प्रदत्त HTML संरचना का उपयोग करना, जहां एक एकल

तत्व वृत्त का प्रतिनिधित्व करता है:

हम दो सीमाओं के साथ एक वृत्त बनाने के लिए सीएसएस को निम्नानुसार संशोधित कर सकते हैं:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

यह सीएसएस बॉक्स-शैडो प्रॉपर्टी का उपयोग करके एक दूसरी बॉर्डर जोड़ता है, जो सर्कल के चारों ओर 5px चौड़ी लाल छाया बनाता है, जो प्रभावी रूप से दूसरी बॉर्डर का भ्रम पैदा करता है। दूसरे बॉर्डर का रंग बॉक्स-शैडो प्रॉपर्टी में लाल मान से निर्धारित होता है।

प्रदत्त सीएसएस वांछित प्रभाव प्राप्त करता है, दो अलग-अलग बॉर्डर के साथ एक सर्कल बनाता है जो कंटेनर के आकार में परिवर्तन के लिए तरलता से प्रतिक्रिया करता है।

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3