सीएसएस सीमा छवि

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

इस समय हमारी सीएसएस शिक्षा में, हमें यह जानना चाहिए कि सीमा संपत्ति क्या है। रीफ्रेश करने के लिए, यह एक संपत्ति है जो किसी तत्व के चारों ओर सीमा निर्दिष्ट करने के लिए शॉर्टहैंड का उपयोग करती है। इसकी निम्नलिखित संरचना है:

बॉर्डर की तरह, बॉर्डर-इमेज प्रॉपर्टी एक शॉर्टहैंड प्रॉपर्टी है जो किसी तत्व के चारों ओर बॉर्डर बनाने के लिए सोर्स इमेज का इस्तेमाल करती है। इसकी निम्नलिखित संरचना है:

बॉर्डर-इमेज:url("https://www.placekitten.com/501/700") /*source*/ 25% / /*slice*/ 70px / /*width*/2px /*outset* /फैलाव; /*दोहराएं*/

• सीमा-छवि-स्रोत:

सीमा-छवि-स्रोत सीएसएस में सीमा-छवि संपत्ति के स्रोत भाग के लिए लांगहैंड संपत्ति है। यह या तो एक यूआरएल लेता है जिसमें एक वास्तविक छवि के सापेक्ष पथ या छवि यूआरएल होता है, या किसी प्रकार का ढाल होता है

• सीमा-छवि-टुकड़ा:

बॉर्डर-इमेज-स्लाइस प्रॉपर्टी बॉर्डर-इमेज प्रॉपर्टी के स्लाइस हिस्से के लिए लॉन्गहैंड प्रॉपर्टी का नाम है। यह छवि को नौ अलग-अलग वर्गों में विभाजित करता है।

डिफ़ॉल्ट रूप से, बीच को हटा दिया जाता है ताकि शेष छवि उस तत्व को घेर सके जिस पर आप संपत्ति का उपयोग कर रहे हैं। बॉर्डर-इमेज-स्लाइस प्रॉपर्टी चार नंबर (% में) तक का उपयोग यह तय करने के लिए कर सकती है कि स्लाइस कहां होंगे। आप भरें . शब्द का भी उपयोग कर सकते हैं यदि आप उस मध्य भाग का उपयोग करना चाहते हैं।

• सीमा-छवि-चौड़ाई:

सीमा-चौड़ाई संपत्ति की तरह, सीमा-छवि-चौड़ाई संपत्ति इंगित करती है कि आप अपनी सीमा-छवि को कितना चौड़ा करना चाहते हैं। यह प्रतिशत या रिम्स/ईएमएस/पीएक्स का उपयोग कर सकता है और चार नंबर तक ले सकता है ताकि सीमा के प्रत्येक पक्ष की अपनी चौड़ाई हो सके।

• सीमा-छवि-शुरुआत:

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

• बॉर्डर-इमेज-रिपीट:

बॉर्डर-इमेज-रिपीट प्रॉपर्टी सेट करती है कि प्रत्येक किनारे कैसे व्यवहार करेगा (किनारे प्रत्येक पक्ष है जिसमें छवि के कोने शामिल नहीं हैं)। इसमें दो मान तक लगते हैं। जब एक मान निर्दिष्ट किया जाता है, तो यह सभी किनारों पर लागू होता है और जब दो मान निर्दिष्ट होते हैं, तो पहला ऊपर और नीचे पर लागू होता है, जबकि दूसरा बाएँ और दाएँ पर लागू होता है। मान खिंचाव . हो सकता है , दोहराएं , दौर या स्पेस .

ब्राउज़र से जुड़ी खास बातें

फ़ायरफ़ॉक्स और सफारी सबसे आम ब्राउज़र हैं जो आपको सीमा-छवि बनाने के लिए प्रत्येक व्यक्तिगत संपत्ति का उपयोग करने की अनुमति देंगे। क्रोम में, आप केवल शॉर्टहैंड प्रॉपर्टी का उपयोग कर सकते हैं - और आपको इसे बॉर्डर-शैली के संयोजन में उपयोग करना होगा संपत्ति जो हमें उस सीमा के शीर्ष के बारे में बताएगी जो हम चाहते हैं (ठोस, धराशायी, आदि)। यदि आप क्रोम का उपयोग कर रहे हैं और यह आपके लिए ठीक से काम नहीं कर रहा है, तो इसे अवश्य देखें।

    <शीर्षक>बॉर्डर इमेज <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; } .फ्लेक्स {प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; पाठ-संरेखण:केंद्र; चौड़ाई:500 पीएक्स; ऊंचाई:300 पीएक्स; मार्जिन:20px; } .border-image-box {/* नीचे केवल Firefox और Safari में काम करता है*/ Border-image-source:url(https://placekitten.com/900/1000); सीमा-छवि-टुकड़ा:25%; सीमा-छवि-चौड़ाई:70px; सीमा-छवि-शुरुआत:2px; सीमा-छवि-दोहराना:गोल; पैडिंग:80px; /* यह तरीका क्रोम में काम नहीं करेगा */ } .border-image-shorthand { Border-style:सॉलिड; बॉर्डर-इमेज:url (https://placekitten.com/900/1000) 25% / 70px / 2px राउंड; पैडिंग:80px;/* ऊपर सभी ब्राउज़रों में काम करता है। फ़ायरफ़ॉक्स और सफारी आप सीमा-शैली संपत्ति का उपयोग किए बिना सीमा-छवि प्रोप का उपयोग कर सकते हैं। क्रोम में आपको वेबपेज पर इमेज दिखाने के लिए बॉर्डर-स्टाइल प्रोप का उपयोग करना होगा */ }    
 यह है एक बक्सा। यह शैली के लिए प्रत्येक व्यक्तिगत सीमा-छवि गुणों का उपयोग कर रहा है 
 
 यह एक बॉक्स है। यह शैली के लिए बॉर्डर-इमेज शॉर्टहैंड का उपयोग कर रहा है 
 

इस ट्यूटोरियल में, हमने सीखा कि किसी तत्व के चारों ओर CSS इमेज बॉर्डर बनाने के लिए बॉर्डर-इमेज प्रॉपर्टी का उपयोग कैसे करें। यह एक शॉर्टहैंड प्रॉपर्टी है जिसमें बॉर्डर-इमेज-सोर्स, बॉर्डर-इमेज-स्लाइस, बॉर्डर-इमेज-चौड़ाई, बॉर्डर-इमेज-आउटसेट और बॉर्डर-इमेज-रिपीट शामिल हैं। इसे सभी ब्राउज़रों के साथ संगत बनाने के लिए, बॉर्डर-इमेज मान निर्दिष्ट करने से पहले बॉर्डर-शैली को सॉलिड पर सेट करें।