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

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

सिंटैक्स

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 मान पर निर्भर करता है):

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

css#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;
}

Результат:

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

css#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 में निर्धारित है, इसलिए उसके लिए उपयुक्त शैली और रंग निर्धारित करना समझ में आता है।

मान

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

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

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

css#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

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

css#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 काम करता है:

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

css#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:

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

css#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 की चौड़ाई को समान छोड़ देंगे। हीरे पूरी बॉर्डर पर खिंच जाएंगे:

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

css#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 सक्रिय हो जाएगा, और छवि का केंद्रीय हिस्सा हमारे ब्लॉक की पृष्ठभूमि बन जाएगा:

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

css#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;
}

Результат:

उदाहरण

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

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

css#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 का मान है)। ध्यान दें कि बॉर्डर स्वयं नहीं बढ़ी है, लेकिन बॉर्डर की छवि - हां, क्योंकि यह टेक्स्ट के नीचे रेंग जाएगी:

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

css#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 का मान है):

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

css#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;
}

Результат:

यह भी देखें