सीमा-छवि - सीएसएस-ट्रिक्स

border-image एक आशुलिपि संपत्ति है जो आपको किसी तत्व की सीमा के रूप में एक छवि या सीएसएस ग्रेडिएंट का उपयोग करने देती है।

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageसंपत्ति किसी भी तत्व के लिए लागू किया जा सकता है, आंतरिक तालिका तत्वों को छोड़ (उदाहरण के टीआर, वें, टीडी) जब border-collapseके लिए निर्धारित है collapse।

गुण

border-imageआशुलिपि के लिए केवल आवश्यक संपत्ति है border-image-source। यदि वे निर्दिष्ट नहीं हैं, तो अन्य गुण उनके प्रारंभिक मूल्यों के लिए डिफ़ॉल्ट हैं। ये border-imageक्रम में गुण हैं :

border-image-source

.module ( border-image-source: url(border.png.webp); )

यह संपत्ति सीमा छवि के लिए स्रोत निर्दिष्ट करती है। यह एक URL, डेटा यूआरआई, सीएसएस ग्रेडिएंट या इनलाइन एसवीजी हो सकता है (हालांकि इनलाइन एसवीजी के लिए समर्थन सीमित है, एसवीजी उपयोग नोट देखें)।

प्रारंभिक मूल्य है none।

border-image-slice

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

इस संपत्ति के मूल्य उस ब्राउज़र को बताते हैं जहां सीमा के टुकड़े बनाने के लिए छवि को "स्लाइस" किया जाता है। छवि को 9 खंडों में विभाजित किया गया है - चार कोने, चार पक्ष, और केंद्र।

अगर आपको लगता है कि यह अच्छा लगता है, तो आप अच्छी कंपनी में हैं। कुछ साल पहले एरिक मायर के ब्लॉग पर इस विषय पर एक लंबी चर्चा हुई थी, जिसमें कई फ्रंटेंड विकास महानों का वजन किया गया था।

इस डेमो में, एक दिल div की सीमा के आसपास दोहराता है। border-image-sourceछवि एक ही दिल आइकन की आठ साल की एक समग्र छवि है, तो कटा हुआ है कि पूरा दिल के आकार तत्व के प्रत्येक पक्ष पर इस्तेमाल किया जाता है।

पेन बॉर्डर-इमेज डेमो देखें: CodePen पर CSS-Tricks (@ css-tricks) द्वारा आइकन बॉर्डर।

अधिक उपयोग नोट्स

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

कुछ अन्य सीमा संपत्तियों के विपरीत, border-imageएनिमेटेड नहीं हो सकते। इसके साथ स्टाइल भी नहीं किया जा सकता है border-radius।

यदि आप एक border-image-sourceऔर borderचौड़ाई या border-image-widthबिना किसी स्लाइस के घोषणा करते हैं , तो पूरी बिना लाइसेंस वाली छवि को तत्व के चार कोनों पर रखा जाएगा, जो आपकी निर्दिष्ट चौड़ाई तक पहुंच जाएगी।

सम्बंधित

• border
• border-collapse
• box-sizing

अधिक जानकारी

• border-image सीएसएस पृष्ठभूमि और सीमाओं में मॉड्यूल स्तर 3 सीआर
• border-image एमडीएन में
• Border-image.com, यह टूल आपको एक छवि अपलोड करने देता है और सीमा स्लाइस के साथ खेलने के लिए जब तक आप उन्हें सही नहीं करते हैं, तब यह आपके लिए CSS उत्पन्न करता है।
• डुडले स्टोरी से समझाया गया बॉर्डर इमेज।

अधिक प्रदर्शन

• इसके अलावा डडली स्टोरी से, प्रैक्टिकल बॉर्डर-इमेज: रिस्पॉन्सिबल पिक्चर फ्रेम, एक कोडपेन डेमो। एक संवेदनशील छवि पर समझदारी से सीमा छवि का उपयोग करने का यह एक अच्छा उदाहरण है। ध्यान दें कि "फ्रेम" छोटे स्क्रीन आकारों में हटा दिया गया है।
• एसवीजी और सीमा-छवि, लुकास लेमनियर द्वारा एक पेन का उपयोग करते हुए सच बिंदीदार सीमाएं। बदसूरत वर्ग "बिंदीदार" सीमा के लिए एक समाधान, यह विधि आपको वास्तविक दौर डॉट्स देती है!
• ग्रेडिएंट बटन, पेन द्वारा कोडपेन यूजर जीएसएसएक्सजीएसएस। सीमा चित्र के रूप में एक रैखिक ढाल का एक सुंदर उदाहरण।
• फिल्म स्ट्रिप, निक पेटिट द्वारा एक पेन। शायद सबसे व्यावहारिक डेमो नहीं है, यह एक मजेदार, उत्साही उदाहरण है कि आप क्या कर सकते हैं border-image।

ब्राउज़र का समर्थन

border-imageमूल रूप से आवश्यक वेंडर ने सभी ब्राउज़रों पर उपसर्ग किए जो इसका समर्थन करते थे। अब यह सभी ब्राउज़रों के नवीनतम संस्करण में उपसर्ग करता है। यह तालिका जहां पहले से तैयार उपसर्ग समर्थन और जहां लागू हो, वहां सबसे पुराना पूर्व-समर्थन दोनों दिखाती है।

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
*, १६	3 *, 6	3.5 15, 15	10.5, 15 15	1 1	2.1 *, 4.4	३.२ *, ६

* -webkitउपसर्ग के साथ ।
Fix -mozउपसर्ग के साथ । ;
10.5 - -oउपसर्ग के साथ 14 श्रृंखला ; fillकिसी भी संस्करण में कीवर्ड समर्थित नहीं है।