सीएसएस सीमा छवियां
सीएसएस सीमा छवियां
CSS border-imageसंपत्ति के साथ, आप एक छवि को एक तत्व के चारों ओर सीमा के रूप में उपयोग करने के लिए सेट कर सकते हैं।
CSS बॉर्डर-इमेज प्रॉपर्टी
CSS border-imageगुण आपको किसी तत्व के चारों ओर सामान्य सीमा के बजाय उपयोग की जाने वाली छवि निर्दिष्ट करने की अनुमति देता है।
संपत्ति में तीन भाग होते हैं:
- सीमा के रूप में उपयोग करने के लिए छवि
- छवि को कहाँ काटें
- परिभाषित करें कि क्या मध्य वर्गों को दोहराया जाना चाहिए या बढ़ाया जाना चाहिए
हम निम्नलिखित छवि का उपयोग करेंगे (जिसे "बॉर्डर.पीएनजी" कहा जाता है):
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:
बॉर्डर-इमेज: url(border.png) 50 राउंड;
उदाहरण 2:
बॉर्डर-इमेज: url(border.png) 20% राउंड;
उदाहरण 3:
बॉर्डर-इमेज: url(border.png) 30% राउंड;
यहाँ कोड है:
उदाहरण
#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;
}
सीएसएस सीमा छवि गुण
| Property | Description |
|---|---|
| border-image | A shorthand property for setting all the border-image-* properties |
| border-image-source | Specifies the path to the image to be used as a border |
| border-image-slice | Specifies how to slice the border image |
| border-image-width | Specifies the widths of the border image |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |