अलग-अलग रंगों के साथ डबल बॉर्डर कैसे जोड़ें?
CSS का उपयोग करके किसी भी आकृति पर दोहरा बॉर्डर जोड़ने के लिए, “ :पहले ” चयनकर्ता प्रसिद्ध है। यह दोनों सीमाओं के रंग को अद्वितीय बनाने के लिए बदलता है। विभिन्न रंगों के साथ दोहरा बॉर्डर जोड़ने के लिए चरण-दर-चरण प्रक्रिया नीचे दी गई है:
चरण 1: डिव तत्व जोड़ें और कक्षाएं असाइन करें
HTML फ़ाइल में, div तत्व को
टैग के अंदर जोड़ें और एक 'आबंटित करें' कक्षा '' के नाम से दोतरफा ”। उपयोगकर्ता अपना स्वयं का वर्ग नाम भी बना सकते हैं:< डिव कक्षा = 'डबल-बॉर्डर' >
< / डिव >
चरण 2: स्टाइल टैग बनाएं
इस चरण में, वर्ग के लिए एक भाग बनाएँ ' दोतरफा 'और इसे' के साथ एक प्रति बनाएं :पहले ” चयनकर्ता। इस तरह, CSS गुण हमारी कक्षाओं में लागू होंगे:
< शैली >
।दोहरा- सीमा {
}
।दोहरा- सीमा :पहले {
}
< / शैली >
चरण 3: कक्षा में शैलियाँ जोड़ें
CSS गुण उस div तत्व पर लागू होते हैं जिसका एक वर्ग है “ दोतरफा ”। निम्नलिखित शैलियों का उल्लेख नीचे किया गया है:
।दोहरा- सीमा {
पृष्ठभूमि- रंग : #सीसीसी;
सीमा : 4px ठोस हरा;
पैडिंग: 50 पीएक्स;
चौड़ाई : 16 पीएक्स;
ऊंचाई : 16 पीएक्स;
स्थिति: रिश्तेदार;
अंतर: 0 ऑटो;
}
CSS संपत्तियों का विवरण नीचे दिया गया है:
- सबसे पहले, 'जोड़ें' पृष्ठभूमि का रंग 'जो ग्रे है और' सीमा ”4px वजन और हरे रंग का।
- ' गद्दी ”50px का सभी पक्षों से 50px का आंतरिक स्थान बनाने के लिए।
- अंत में, ' चौड़ाई ' और ' ऊंचाई' 16px का। यह भी ' अंतर '0 ऑटो है जिसका मतलब है कि ऊपर और नीचे के मार्जिन शून्य और बाएं होंगे।
वेबपेज ऐसा दिखता है:
आउटपुट प्रदर्शित करता है कि सीमा 'div' पर लागू होती है।
चरण 4: CSS चयनकर्ता को जोड़ना
अब, स्टाइल टैग में दूसरे बॉक्स की ओर बढ़ें जिसमें “ :पहले ” चयनकर्ता संलग्न है, और नीचे कोड लिखें:
।दोहरा- सीमा :पहले {पृष्ठभूमि : कोई नहीं;
सीमा : 4px ठोस नीला;
संतुष्ट : '' ;
स्थिति: निरपेक्ष;
शीर्ष: 4 पीएक्स;
बायां: 4 पीएक्स;
दाएं: 4 पीएक्स;
नीचे: 4 पीएक्स;
}
गुणों को नीचे समझाया गया है:
- उपयोग ' पद ” संपत्ति एक तत्व की स्थिति तय करने के लिए।
- उसके बाद, ' ऊपर, बाएँ, दाएँ और नीचे ' मूल आइटम से नए बनाए गए आइटम के मार्जिन को परिभाषित करता है।
- एक सीएसएस चयनकर्ता जिसे 'कहा जाता है: पहले ” किसी चुने हुए तत्व के सामने सामग्री जोड़ता है।
आउटपुट जैसा दिखता है:
इस तरह अलग-अलग रंगों का इस्तेमाल करके दोहरा बॉर्डर जोड़ा जा सकता है।
निष्कर्ष
दोहरा बॉर्डर जोड़ने के लिए, पहले एक div एलिमेंट बनाएं और उसे एक क्लास में असाइन करें। फिर, सीएसएस जोड़ें ' पद 'संपत्ति जो रिश्तेदार पर सेट होनी चाहिए। उसके बाद, इसमें CSS चयनकर्ता ': पहले' जोड़ें ताकि उपयोगकर्ता चुने हुए तत्व से पहले सामग्री जोड़ सकें। इस गाइड ने विभिन्न रंगों के साथ डबल बॉर्डर के उपयोग का प्रदर्शन किया है।