सीमा संपत्ति के बारे में सब

हर कोई सीएसएस सीमा पैरामीटर से परिचित है, लेकिन क्या कोई ऐसी चीज है जिसके बारे में हम नहीं जानते हैं?

मूल बातें

हर कोई इस उपयोग से परिचित है:

border: 1px solid black; 

यह एक एकल पिक्सेल ठोस फ्रेम है। हम वाक्यविन्यास को थोड़ा बदलते हैं:

 border-width: thick; border-style: solid; border-color: black; 

उदाहरण के लिए, बॉर्डर-चौड़ाई पैरामीटर के तीन पैरामीटर हैं: पतले, मध्यम, मोटे:

यदि आपको किसी वस्तु पर मंडराते समय सीमा का रंग बदलने की आवश्यकता है:

 .box { border: 1px solid red; } .box:hover { border: 1px solid green; } 

लेकिन यह लागू करने के लिए आसान और अधिक सही है:

 .box { border: 1px solid red; } .box:hover { border-color: green; } 

बॉर्डर-त्रिज्या

बॉर्डर-त्रिज्या गोल कोनों को प्रदर्शित करने के लिए एक नया CSS3 पैरामीटर है, जो इंटरनेट एक्सप्लोरर 8 (और पुराने संस्करणों) को छोड़कर सभी आधुनिक ब्राउज़रों में सही ढंग से काम करता है।

प्रत्येक कोने के लिए, आप एक गोलाई प्रदान कर सकते हैं:

 border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0; 

उपरोक्त उदाहरण में, "0" बॉर्डर-टॉप-राइट-रेडियस और बॉर्डर-बॉटम-लेफ्ट-रेडियस सेट करना आवश्यक नहीं है यदि वे उन मूल्यों को विरासत में नहीं लेते हैं जिन्हें बदलने की आवश्यकता है।
पूरी संरचना को एक पंक्ति में संकुचित किया जा सकता है:

 /* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0; 

यहाँ सीएसएस का उपयोग कर नींबू कैसे आकर्षित किया जाए:

 .lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; } 

सीमा पैरामीटर का उपयोग करने के सबसे सरल और सबसे लोकप्रिय उदाहरण यहां वर्णित हैं। आइए अधिक जटिल लोगों को आगे बढ़ाएं।

कई सीमाएँ

बॉर्डर स्टाइल

ठोस, धराशायी और बिंदीदार सबसे आम सीमा-शैली मूल्य हैं, लेकिन आइए दूसरों को देखें, उदाहरण के लिए, नाली और रिज।

 border: 20px groove #e3e3e3; 

या अधिक विस्तार से:

 border-color: #e3e3e3; border-width: 20px; border-style: groove; 

रेखांकित करें

दोहरी सीमा बनाने का सबसे लोकप्रिय तरीका रूपरेखा पैरामीटर के साथ है:

 .box { border: 5px solid #292929; outline: 5px solid #e3e3e3; } 

यह विधि महान काम करती है, लेकिन एक दोहरी सीमा बनाने तक सीमित है। यदि आपको किसी तत्व की कई सीमाओं को प्रदर्शित करने की आवश्यकता है, तो आपको एक अलग तकनीक का उपयोग करने की आवश्यकता है।

मिथ्या

आप इस डिजाइन का उपयोग कर सकते हैं:

 .box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; } 

यह सबसे सुंदर समाधान नहीं हो सकता है, हालांकि यह काम करता है

बॉक्स छाया

छाया का उपयोग करने का दूसरा तरीका:

 .box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; } 

कोण बदलें

दो मानों को "/" का उपयोग करके सीमा-त्रिज्या पैरामीटर पर लागू किया जा सकता है, उदाहरण के लिए:

 border-radius: 50px / 100px; /* horizontal radius, vertical radius */ 

यह इस प्रकार है:

 border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px; 

यह तकनीक उपयोगी हो सकती है यदि आपको गोलाई के बजाय वक्रता का अनुकरण करने की आवश्यकता है। उदाहरण के लिए, आप कर्ल किए गए पेपर का प्रभाव प्राप्त कर सकते हैं:

 .box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; } 

सीएसएस आकार

निम्नलिखित उदाहरण इस मार्कअप को मानते हैं:

 <div class="box"></div> 

और इस तरह के एक बुनियादी सीएसएस:

 .box { width: 200px; height: 200px; background: black; } 

सीएसएस आकार का उपयोग करने का सबसे आम उदाहरण तीर प्रदर्शित करना है। यह समझने के लिए कि यह कैसे काम करता है, आपको प्रत्येक पक्ष के लिए एक अलग सीमा-रंग का उपयोग करके यह पता लगाने की आवश्यकता है कि इसे चौड़ाई और ऊंचाई के लिए "0" पर सेट करें:

 .arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; } 

या एक ही बात:

 .arrow { width: 0; height: 0; border: 100px solid; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; } 

या तो:

 .arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; } 

और अब हम केवल नीले त्रिकोण को छोड़ते हैं:

 .arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; } 

स्पीच बबल बनाना

हमारा मूल मार्कअप:

 <div class="speech-bubble">Hi there!</div> 

और शैलियों:

 .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; } 

अब आपको तीर-त्रिकोण को सही जगह पर रखने की आवश्यकता है। यहाँ हमारे रंग बॉक्स है:

 .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; } 

बॉक्स का केवल एक चौथाई हिस्सा छोड़ें:

 .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; } 

अब नीचे जाएँ और पेंट करें:

 .speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ } 

आवेदन उदाहरण:

 /* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION <div class="speech-bubble speech-bubble-top">Hi there</div> */ .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; } /* Position the Arrow */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; } .speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; } .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; } .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; } 

केंद्र पाठ लंबवत

टेक्स्ट को एक लाइन तक सीमित करने के लिए वर्टिकल सेंटरिंग के साथ लाइन-हाइट का उपयोग घटा। इस समस्या को हल करने के लिए, आप डिस्प्ले: टेबल टू स्पीच बबल और डिस्प्ले: टेबल-सेल टू द टेक्स्ट:

 .speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; } 

कस्टम बॉर्डर उपयोग का एक और उदाहरण:

 .biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; } 

परिणाम

सीमा पैरामीटर का उपयोग करना केवल "1px ठोस काले" तक सीमित नहीं है, सीमाओं का उपयोग करके आप विभिन्न आकार बना सकते हैं, और यह एक बार सीएसएस कक्षा लिखने और पृष्ठ पर कई तत्वों पर लागू करने के लिए पर्याप्त है।