CSS बॉर्डर-इमेज़ अट्टैबिट
- पिछला पृष्ठ बॉर्डर-एण्ड-स्टार्ट-रेडियस
- अगला पृष्ठ बॉर्डर-इमेज-आउटसेट
वर्णन और उपयोग
border-image गुण एक संक्षिप्त गुण है, जो निम्नलिखित गुण को सेट करता है:
यदि मूल्य सूचीबद्ध नहीं होता है, तो उसे डिफ़ॉल्ट मूल्य निर्धारित किया जाएगा。
सुझाव:कृपया border-image-* गुण का उपयोग करके सुंदर स्केलेबल बटन बनाएं!
दूसरे देखें:
CSS3 शिक्षा:CSS3 किनारा
उदाहरण
चित्र को div एलीमेंट के बॉर्डर के रूप में निर्दिष्ट करें:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
पृष्ठ के नीचे अधिक उदाहरण हैं。
CSS व्याकरण
border-image: source slice width outset repeat|initial|inherit;
गुण मूल्य
| मूल्य | वर्णन | टेस्ट |
|---|---|---|
| border-image-source | बॉर्डर में उपयोग में लाए जाने वाले चित्र का पथ。 | |
| border-image-slice | चित्र बॉर्डर के अंदर की बढ़ावट。 | |
| border-image-width | चित्र बॉर्डर की चौड़ाई。 | |
| बॉर्डर-इमेज-आउटसेट | बॉर्डर इमेज क्षेत्र का बॉर्डर से बहार जाने वाला मात्रा。 | |
| border-image-repeat | चित्र बॉर्डर किस तरह का होना चाहिए (तकारसारसार), (गोलाकार) या (विस्तारित)। | टेस्ट |
तकनीकी विवरण
| डिफ़ॉल्ट मूल्य: | none 100% 1 0 stretch |
|---|---|
| विरासतीयता: | नहीं |
| संस्करण: | CSS3 |
| JavaScript व्याकरण: | object.style.borderImage="url(border.png) 30 30 round" |
अधिक उदाहरण
- Border-image बटन
- इस उदाहरण में border-image गुण के द्वारा बटन कैसे बनाया जाता है, इसे देखा जाता है。
ब्राउज़र समर्थन
गणना भूमि में संख्याएँ इस गुण के पूर्णता से समर्थन करने वाले पहले ब्राउज़र का संस्करण को सूचित करती हैं。
| च्रोम | IE / एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
- पिछला पृष्ठ बॉर्डर-एण्ड-स्टार्ट-रेडियस
- अगला पृष्ठ बॉर्डर-इमेज-आउटसेट
