द सीएसएस पॉडकास्ट - 016: बॉर्डर
बॉक्स मॉडल मॉड्यूल में, हमने बॉक्स मॉडल के हर सेक्शन की जानकारी देने के लिए, एक फ़्रेम एनॉलॉजी का इस्तेमाल किया.
बॉर्डर बॉक्स आपके बॉक्स का फ़्रेम होता है.
और border
प्रॉपर्टी आपको उस फ़्रेम को बनाने के लिए विकल्पों की बहुत बड़ी रेंज देती हैं
किसी भी स्टाइल में बनाया जा सकता है.
बॉर्डर प्रॉपर्टी
अलग-अलग border
प्रॉपर्टी से बॉर्डर के अलग-अलग हिस्सों की स्टाइल तय की जा सकती है.
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
स्टाइल
बॉर्डर दिखाने के लिए,
आपको यह तय करना होगा कि
border-style
.
आपके पास इनमें से चुनने के लिए कुछ विकल्प हैं:
ridge
, inset
, outset
, और groove
स्टाइल का इस्तेमाल करते समय,
कंट्रास्ट और गहराई उपलब्ध कराने के लिए ब्राउज़र दूसरे दिखाए गए रंग के लिए बॉर्डर के रंग को गहरा कर देगा.
यह अलग-अलग ब्राउज़र और हर ब्राउज़र के लिए अलग-अलग हो सकता है.
खास तौर पर गहरे रंगों के लिए, जैसे कि black
.
Chrome में, ये बॉर्डर शैलियां स्थिर दिखाई देंगी और Firefox में,
तब उन्हें हल्का कर दिया जाएगा, ताकि उनका रंग दूसरा गहरा हो जाए.
ब्राउज़र का व्यवहार अन्य बॉर्डर शैलियों के लिए भी भिन्न हो सकता है,
इसलिए, अलग-अलग ब्राउज़र में अपनी साइट की जांच करना ज़रूरी है.
हर ब्राउज़र dotted
और dashed
स्टाइल को कैसे रेंडर करता है, इस अंतर का एक आम उदाहरण यह है.
अपने बॉक्स के दोनों ओर बॉर्डर शैली सेट करने के लिए,
आप इसका इस्तेमाल कर सकते हैं
border-top-style
border-right-style
,
border-left-style
,
और border-bottom-style
.
शॉर्टहैंड
margin
और padding
की तरह,
आप इसका इस्तेमाल कर सकते हैं
border
'शॉर्टहैंड प्रॉपर्टी' का इस्तेमाल करें.
.my-element {
border: 1px solid red;
}
border
शॉर्टहैंड में मानों का क्रम border-width
है,
border-style
और फिर border-color
.
रंग
बॉक्स के हर तरफ़ या हर तरफ़ रंग सेट किया जा सकता है.
border-color
.
डिफ़ॉल्ट रूप से, इसमें बॉक्स के मौजूदा टेक्स्ट रंग का इस्तेमाल किया जाता है: currentColor
.
इसका मतलब है कि अगर सिर्फ़ बॉर्डर प्रॉपर्टी का एलान किया जाता है,
जैसे कि चौड़ाई,
रंग वह कंप्यूट किया गया मान होगा, जब तक कि आप उसे खास तौर पर सेट नहीं करते.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
अपने बॉक्स के दोनों ओर बॉर्डर का रंग सेट करने के लिए,
इस्तेमाल
border-top-color
border-right-color
,
border-left-color
और
border-bottom-color
.
चौड़ाई
बॉर्डर की चौड़ाई यह है कि रेखा कितनी मोटी है और इसे
border-width
.
बॉर्डर की डिफ़ॉल्ट चौड़ाई medium
है.
हालांकि, यह तब तक नहीं दिखेगा, जब तक कोई स्टाइल तय नहीं की जाती.
thin
और thick
जैसी नाम वाली अन्य चौड़ाई इस्तेमाल की जा सकती हैं.
border-width
प्रॉपर्टी, लंबाई की इकाई भी स्वीकार करती हैं, जैसे कि
px
, em
, rem
या %
.
अपने बॉक्स के हर तरफ़ बॉर्डर की चौड़ाई सेट करने के लिए, इसका इस्तेमाल करें
border-top-width
border-right-width
,
border-left-width
और
border-bottom-width
.
लॉजिकल प्रॉपर्टी
इस लॉजिकल प्रॉपर्टी मॉड्यूल से पता चलता है कि फ़्लो और इनलाइन फ़्लो को ब्लॉक कैसे किया जाता है, की जगह साफ़ तौर पर दिखेगी.
आपके पास बॉर्डर की यह क्षमता भी है:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
इस उदाहरण में, .my-element
के सभी पक्षों को 2px
के तौर पर परिभाषित किया गया है,
बिंदु वाला बॉर्डर जो कि टेक्स्ट का मौजूदा रंग है.
इसके बाद, inline-end
बॉर्डर 2px
रंग में बदल जाता है. यह सॉलिड और लाल रंग का बॉर्डर होता है.
इसका मतलब है कि बाएं से दाएं की जाने वाली भाषाओं, जैसे कि अंग्रेज़ी में
लाल बॉर्डर बॉक्स की दाईं ओर होगा.
दाईं से बाईं ओर लिखी जाने वाली भाषाओं में—जैसे, ऐरेबिक—
लाल बॉर्डर बॉक्स की बाईं ओर होगा.
ब्राउज़र, बॉर्डर में मौजूद लॉजिकल प्रॉपर्टी के लिए अलग-अलग तरह से काम करते हैं, इसलिए, इस्तेमाल करने से पहले यह पक्का कर लें कि सहायता उपलब्ध है.
बॉर्डर की रेडियस
बॉक्स के किनारों को गोल आकार में दिखाने के लिए,
border-radius
प्रॉपर्टी.
.my-element {
border-radius: 1em;
}
यह शॉर्टहैंड, आपके बॉक्स के हर कोने में एक जैसा बॉर्डर जोड़ता है.
अन्य बॉर्डर प्रॉपर्टी की तरह,
आप इससे प्रत्येक साइड के लिए बॉर्डर त्रिज्या को इसके साथ परिभाषित कर सकते हैं
border-top-left-radius
border-top-right-radius
,
border-bottom-right-radius
और
border-bottom-left-radius
.
शॉर्टहैंड में हर कोने का दायरा भी बताया जा सकता है, जो क्रम में आता है: सबसे ऊपर बाईं ओर, सबसे ऊपर दाईं ओर, सबसे नीचे दाईं ओर, फिर सबसे नीचे बाईं ओर.
.my-element {
border-radius: 1em 2em 3em 4em;
}
कोने के लिए एक वैल्यू तय करके,
आप किसी अन्य शॉर्टहैंड का इस्तेमाल कर रहे हैं, क्योंकि बॉर्डर का दायरा दो भागों में बंटा हुआ है:
ऊपर और नीचे की ओर स्क्रोल करें.
इसका मतलब है कि जब border-top-left-radius: 1em
को सेट किया जाता है,
इनमें, सबसे ऊपर बाईं ओर ऊपर रेडियस और सबसे ऊपर बाएं बाएं रेडियस को सेट किया जा रहा है.
आप हर कोने में दोनों प्रॉपर्टी इस तरह से परिभाषित कर सकते हैं:
.my-element {
border-top-left-radius: 1em 2em;
}
इससे 1em
की border-top-left-top
वैल्यू जुड़ जाएगी,
और 2em
का border-top-left-left
मान है.
यह ऊपरी बाएं बॉर्डर के रेडियस को अंडाकार रेडियस में बदल देता है,
की जगह एक ही बार में दिखेगी.
इन वैल्यू को border-radius
शॉर्टहैंड में परिभाषित किया जा सकता है,
/
का इस्तेमाल करके, स्टैंडर्ड वैल्यू के बाद अंडाकार वैल्यू तय करनी है.
इसकी मदद से, अपनी क्रिएटिविटी को बढ़ाने के साथ-साथ कुछ जटिल आकार भी बनाए जा सकते हैं.
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
बॉर्डर इमेज
आपको सीएसएस में सिर्फ़ स्ट्रोक-आधारित बॉर्डर का इस्तेमाल करने की ज़रूरत नहीं है.
आपके पास किसी भी तरह की इमेज इस्तेमाल करने का विकल्प भी है.
border-image
.
इस शॉर्टहैंड प्रॉपर्टी की मदद से सोर्स इमेज,
इमेज को कैसे काटना है, इमेज की चौड़ाई,
सीमा, किनारे से कितनी दूर है और इसे किस तरह दोहराया जाना चाहिए.
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
border-image-width
प्रॉपर्टी border-width
की तरह है:
इस तरह से आप अपने बॉर्डर इमेज की चौड़ाई को सेट कर सकते हैं.
border-image-outset
प्रॉपर्टी का इस्तेमाल करके, बॉर्डर इमेज और उसके चारों तरफ़ मौजूद बॉक्स के बीच की दूरी सेट की जा सकती है.
border-image-source
border-image-source
(बॉर्डर इमेज का सोर्स) किसी भी मान्य इमेज के लिए url
हो सकता है. इसमें सीएसएस ग्रेडिएंट शामिल हैं.
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
border-image-slice
प्रॉपर्टी एक उपयोगी प्रॉपर्टी है, जिसकी मदद से आप किसी इमेज को चार हिस्सों में बांट सकते हैं, जिसमें चार अलग-अलग लाइनें होती हैं.
यह margin
शॉर्टहैंड की तरह काम करता है, जहां टॉप, राइट, बॉटम, और लेफ़्ट ऑफ़सेट वैल्यू तय की जाती है.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
ऑफ़सेट वैल्यू तय करने के बाद,
अब आपकी इमेज में नौ सेक्शन हैं: चार कोने, चार किनारे, और एक बीच का सेक्शन.
कोने, बॉर्डर इमेज वाले एलिमेंट के कोनों पर लगाए जाते हैं.
किनारे उस एलिमेंट के किनारों पर लगाए जाते हैं.
border-image-repeat
प्रॉपर्टी तय करती है कि वे किनारे किस तरह अपनी जगह को भरेंगे और
border-image-width
प्रॉपर्टी, स्लाइस के साइज़ को कंट्रोल करती है.
आखिर में, fill
कीवर्ड यह तय करता है कि स्लाइसिंग के बाद बीच वाले सेक्शन का इस्तेमाल, एलिमेंट के बैकग्राउंड इमेज के तौर पर किया जाएगा या नहीं.
border-image-repeat
border-image-repeat
कि आप सीएसएस को कैसे निर्देश देते हैं कि आप अपने बॉर्डर इमेज को किस तरह दोहराना चाहते हैं.
यह background-repeat
की तरह ही काम करता है.
- शुरुआती वैल्यू
stretch
है. यह सुविधा, सोर्स इमेज को स्ट्रेच करती है, ताकि जहां मुमकिन हो. repeat
वैल्यू, सोर्स इमेज के किनारों को जितनी बार हो सके उतनी बार टाइल करती है, साथ ही, ऐसा करने के लिए किनारों वाले हिस्सों को क्लिप किया जा सकता है.round
की वैल्यू, रिपीट मोड के जैसी ही है, लेकिन इमेज के किनारे वाले हिस्सों को क्लिप करने के बजाय, कई बार फ़िट करने के लिए, यह इमेज को स्ट्रेच करने के साथ-साथ उसे दोहराता है, ताकि उसे बिना किसी रुकावट के दोहराया जा सकेspace
वैल्यू दोबारा डाली गई है. लेकिन यह वैल्यू, हर किनारे वाले इलाके के बीच स्पेस जोड़ती है, ताकि आसान पैटर्न बनाया जा सके.
देखें कि आपको कितना समझ आया है
सीमाओं से जुड़ी अपनी जानकारी को परखें
बॉर्डर का डिफ़ॉल्ट रंग कौनसा है?
black
currentColor
historicColor
white
.my-element { border: solid hotpink; }
किसी बॉर्डर की डिफ़ॉल्ट चौड़ाई क्या है?
1px
solid
medium
border-inline: 1px solid
यह कर पाएगा...