सीएसएस बॉर्डर इमेज

सीएसएस बॉर्डर इमेज

CSS के द्वारा border-image गुण, इसके द्वारा आप इमेज को तत्व के चारों ओर के बॉर्डर के रूप में इस्तेमाल कर सकते हैं。

CSS border-image गुण

CSS border-image गुण आपको निर्धारित करने देता है कि कौन-सी इमेज का इस्तेमाल करना है, न कि सामान्य बॉर्डर को घेरने के लिए。

यह गुण तीन भागों में है:

  • बॉर्डर के लिए इस्तेमाल किए जाने वाला इमेज
  • जहाँ इमेज को काटना है
  • मध्य भाग को दोहराने या फैलाने का निर्धारण करता है

हम इस इमेज को ("border.png") इस्तेमाल करेंगे

border-image गुण इमेज को स्वीकार करता है, और इसे नौ भागों में काटता है, जैसे कि खेल के खाना बोर्ड। फिर, कोनों को कोनों पर रखा जाता है और आपके सेट के अनुसार मध्य भाग को दोहराया या फैलाया जाता है。

ध्यान:यहाँ, border-image कार्यरत हो, तो इस तत्व को निम्नलिखित गुणों को निर्धारित करना होगा border गुण!

यहाँ, इमेज का मध्य भाग को बॉर्डर के लिए दोहराया जाता है:

इमेज को बॉर्डर के रूप में इस्तेमाल किया जाता है!

यह कोड है:

उदाहरण

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

स्वयं को प्रयोग करें

यहाँ, इमेज का मध्य भाग बॉर्डर के लिए फैलाया जाता है:

इमेज को बॉर्डर के रूप में इस्तेमाल किया जाता है!

यह कोड है:

उदाहरण

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

स्वयं को प्रयोग करें

सूचना:border-image गुण वास्तव में निम्नलिखित गुणों का लघुरूप है:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS बॉर्डर इमेज - विभिन्न काटन मान

विभिन्न काटन मानों से बॉर्डर की दृश्यमानता पूरी तरह से बदल सकती है:

उदाहरण 1:

border-image: url(border.png) 50 round;

उदाहरण 2:

border-image: url(border.png) 20% round;

उदाहरण 3:

border-image: url(border.png) 30% round;

यह कोड है:

उदाहरण

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

स्वयं को प्रयोग करें

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

गुण वर्णन
border-image सभी border-image-* गुणों के लिए लघुरूप का गुण निर्धारित करता है。
border-image-source बॉर्डर इमेज के लिए इस्तेमाल किए जाने वाले इमेज का पथ निर्दिष्ट करता है。
border-image-slice बॉर्डर इमेज को कैसे काटना है।
border-image-width बॉर्डर इमेज की चौड़ाई का निर्धारण करें。
border-image-outset बॉर्डर इमेज क्षेत्र को बॉर्डर बॉक्स से बाहर कितना बढ़ाए जाएगा।
border-image-repeat बॉर्डर इमेज को दोहराने, गोलाकार या फिर फैलाने का निर्धारण करें。