बॉर्डर-इमेज गुण

border-image गुण बॉर्डर के लिए छवि निर्धारित करता है, यह border-image-source, border-image-slice, border-image-repeat, border-image-width और border-image-outset गुणों के लिए एक शॉर्टहैंड गुण है। इस मामले में, शॉर्टहैंड गुण CSS में संक्षिप्त गुणों से पहले दिखाई दिया और इसलिए पुराने ब्राउज़रों की अधिक संख्या में समर्थित है।

सिंटैक्स

सिलेक्टर {
	border-image: url(छवि का पथ) ऑफ़सेट/चौड़ाई/आउटसेट रिपीट;
}

विवरण

जिस छवि को हम बॉर्डर के लिए लागू करना चाहते हैं, उसे एक विशेष तरीके से डिज़ाइन किया जाना चाहिए: कोनों के लिए 4 मिनी छवियाँ और किनारों के लिए 4 छवियाँ। ऐसी छवि का उदाहरण:

इस मामले में, केंद्रीय भाग सफेद छोड़ दिया गया है (क्योंकि हम नहीं चाहते कि यह तत्व की पृष्ठभूमि पर दिखाई दे)। भरे हुए केंद्रीय भाग वाली छवि का उदाहरण:

slice मान ब्राउज़र को बताता है कि छवि के कौन से हिस्से कोनों के लिए जाएंगे, और कौन से किनारों के लिए (और कौन सा हिस्सा केंद्रीय होगा)। कोनों के लिए 4 हिस्से जाते हैं, किनारों के लिए 4 हिस्से जाते हैं और एक हिस्सा (केंद्रीय) तत्व की पृष्ठभूमि पर जाता है (वैकल्पिक रूप से, कीवर्ड fill)।

छवि को निम्नलिखित तरीके से टुकड़ों में "काटा" जाता है: slice मान के लिए एक से चार मान निर्दिष्ट किए जाते हैं। आइए एक उदाहरण से समझते हैं। मान लीजिए कि निम्नलिखित मान दिए गए हैं: 10 20 30 40 (पिक्सेल px निर्दिष्ट नहीं हैं, यह इस तथ्य से संबंधित है कि छवि रेस्टर और वेक्टर दोनों हो सकती है)। मान निम्नलिखित बताते हैं: 10 ऊपर से काटें, 20 दाएं से काटें, 30 नीचे से काटें, 40 बाएं से काटें। छवि का कौन सा हिस्सा बाएं ऊपरी कोने में जाएगा? यह टुकड़ा होगा: 10 ऊपर से, 40 बाएं से। दाएं ऊपरी कोने में 10 ऊपर से, 20 दाएं से जाएगा। और इसी तरह आगे।

अक्सर छवि सममित होती है (जैसे ऊपर के हीरे) और हमें कोनों के लिए समान टुकड़े काटने की आवश्यकता होती है। ऐसे में, एक मान निर्दिष्ट किया जाता है, जो सभी तरफ से समान ऑफ़सेट निर्धारित करेगा। नारंगी हीरे काटने के लिए, हम slice को 26 में निर्दिष्ट करेंगे (क्योंकि नारंगी हीरे का आकार 26px बाय 26px है)। पीले हीरे बॉर्डर की रेखाओं पर पड़ेंगे और उनके साथ निम्नलिखित होगा: वे या तो पूरे ब्लॉक में खिंच जाएंगे या बॉर्डर के साथ दोहराए जाएंगे (यह repeat मान पर निर्भर करता है):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

border-image गुण तत्व की बॉर्डर की चौड़ाई निर्दिष्ट करने की अनुमति नहीं देता है। ब्राउज़र बस मौजूदा चौड़ाई के साथ बॉर्डर के साथ छवि को खींचता है। इसलिए इसे border गुण के माध्यम से निर्धारित करने की आवश्यकता होती है।

पुराने ब्राउज़रों के उपयोगकर्ता (या अक्षम छवियों वाले) मानक बॉर्डर देखेंगे, जो border में निर्धारित है, इसलिए उसके लिए उपयुक्त शैली और रंग निर्धारित करना समझ में आता है।

मान

मान	विवरण
url(छवि का पथ)	छवि का पथ। अधिक जानकारी के लिए `border-image-source` देखें।
ऑफ़सेट	ब्राउज़र को बताता है कि छवि के कौन से हिस्से कोनों के लिए जाएंगे, और कौन से किनारों के लिए (और कौन सा हिस्सा केंद्रीय होगा)। संभावित मान: `1`-वें से `4`-वें तक संख्या \| `1`-वें से `4`-वें तक प्रतिशत। स्पेस के माध्यम से कीवर्ड `fill` निर्दिष्ट किया जा सकता है संख्या या प्रतिशत के अतिरिक्त। अधिक जानकारी के लिए `border-image-slice` देखें।
चौड़ाई	यह गुण बॉर्डर के दृश्यमान भाग की चौड़ाई को नियंत्रित करता है, इसे स्केल करता है। यदि यह मान `border-width` की चौड़ाई से अधिक है, तो बॉर्डर की छवि सामग्री के नीचे रेंग जाएगी। संभावित मान: CSS इकाइयाँ \| प्रतिशत \| संख्या \| `auto`। अधिक जानकारी के लिए `border-image-width` देखें।
आउटसेट	एक दिलचस्प गुण, जो बॉर्डर को तत्व की सीमाओं से बाहर धकेलने की अनुमति देता है। नकारात्मक मान समर्थित नहीं हैं। संभावित मान: CSS इकाइयाँ (% (?) के अलावा) \| धनात्मक संख्या \| auto। अधिक जानकारी के लिए `border-image-outset` देखें।
रिपीट	बॉर्डर (कोनों पर नहीं) पर छवि को कैसे दोहराया जाए यह निर्दिष्ट करता है: टाइल करना या खींचना। संभावित मान: `stretch` \| `repeat` \| `round` \| `space`। अधिक जानकारी के लिए `border-image-repeat` देखें।

डिफ़ॉल्ट मान: none 100%/1/0 stretch (url(छवि का पथ) ऑफ़सेट/चौड़ाई/आउटसेट रिपीट)।

उदाहरण . border-image-repeat: मान repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-repeat: मान stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-repeat: मान round

वर्तमान में सामान्य स्थिति में मान repeat सेट है, और होवर पर - round। ध्यान दें कि होवर से पहले बॉर्डर में हीरे की पूरी संख्या नहीं आती है, जबकि होवर के बाद - पूरी संख्या आती है। इसी तरह round काम करता है:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-repeat: दो शब्द

चौड़ाई के लिए मान repeat और ऊंचाई के लिए stretch:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . छवि की चौड़ाई का बॉर्डर की चौड़ाई से मेल खाना

हम माउस होवर पर border-width बढ़ा देंगे, जबकि border-image की चौड़ाई को समान छोड़ देंगे। हीरे पूरी बॉर्डर पर खिंच जाएंगे:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-slice

आइए एक अलग छवि लेते हैं, जिसमें अलग-अलग टुकड़े समान नहीं हैं:

हम निर्दिष्ट करेंगे कि छवि के किन हिस्सों को काटना है - 25% 30% 10% 20%। यह इस तरह काम करता है: 25% - ऊपर से ऑफ़सेट, 30% - दाएं से ऑफ़सेट, 10% - नीचे से ऑफ़सेट, 20% - बाएं से ऑफ़सेट। असल में इन टुकड़ों से हम कोनों को काटते हैं। ऊपरी बायां कोना छवि के 25% ऊपर से, और 20% बाएं से होगा। ऊपरी दायां कोना छवि के 25% ऊपर से, और 30% दाएं से होगा और इसी तरह आगे।

इसके अलावा, यदि आप ब्लॉक पर माउस ले जाते हैं, तो कीवर्ड fill सक्रिय हो जाएगा, और छवि का केंद्रीय हिस्सा हमारे ब्लॉक की पृष्ठभूमि बन जाएगा:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

उदाहरण

लीनियर ग्रेडिएंट की मदद से ग्रेडिएंट बॉर्डर बनाते हैं:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

उदाहरण . border-image-width

हम border-image-width का मान 2 पर सेट करेंगे (बॉर्डर की छवि 2 गुना बड़ी हो जाएगी) तत्व पर माउस होवर करने पर (26/2 - स्लैश के बाद निर्दिष्ट किया गया, जबकि 26 - border-image-slice का मान है)। ध्यान दें कि बॉर्डर स्वयं नहीं बढ़ी है, लेकिन बॉर्डर की छवि - हां, क्योंकि यह टेक्स्ट के नीचे रेंग जाएगी:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

उदाहरण . border-image-outset

हम border-image-outset का मान 3 पर सेट करेंगे, तत्व पर माउस होवर करने पर। (26/1/2 - दूसरे स्लैश के बाद निर्दिष्ट किया गया, जबकि 26 - border-image-slice का मान है, और - 1 - border-image-width का मान है):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

यह भी देखें

गुण border-image-source,
जो बॉर्डर के लिए छवि का पथ निर्धारित करता है
गुण border-image-slice,
जो बॉर्डर के लिए छवि का स्लाइसिंग निर्धारित करता है
गुण border-image-repeat,
जो बॉर्डर के लिए छवि का रिपीट निर्धारित करता है
गुण border-image-width,
जो बॉर्डर के लिए छवि का आकार निर्धारित करता है
गुण border-image-outset,
जो बॉर्डर के लिए छवि का आउटसेट निर्धारित करता है