सीमा छवि संपत्ति का उपयोग किसी तत्व की सीमा छवि को सेट करने या प्राप्त करने के लिए किया जाता है। यह एक शॉर्टहैंड प्रॉपर्टी है, जिससे हम एक बार में BorderImageSource, BorderImageSlice, BorderImageWidth, BorderImageOutset और BorderImageRepeat गुणों में हेरफेर कर सकते हैं।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डर इमेज प्रॉपर्टी सेट करना -
object.style.borderImage = "source slice width outset repeat|initial|inherit"
मान
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
| वरिष्ठ नहीं <वें>मूल्य और विवरण | |
|---|---|
| 1 | बॉर्डरइमेज सोर्स यह सीमा के रूप में उपयोग किए जाने वाले छवि पथ को निर्दिष्ट करता है। |
| 2 | बॉर्डरइमेजस्लाइस यह छवि-सीमा आवक ऑफ़सेट निर्दिष्ट करता है। |
| 3 | बॉर्डरइमेजविड्थ यह छवि-सीमा चौड़ाई निर्दिष्ट करता है। |
| 4 | बॉर्डरइमेजआउटसेट यह सीमा छवि क्षेत्र की मात्रा निर्दिष्ट करता है जिसके द्वारा यह सीमा बॉक्स से परे फैली हुई है। |
| 5 | बॉर्डरइमेज रिपीट यह निर्दिष्ट करता है कि छवि-सीमा को गोल, दोहराया या बढ़ाया जाना चाहिए। |
| 6 | प्रारंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| 7 | उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए |
उदाहरण
आइए बॉर्डर इमेज प्रॉपर्टी के लिए एक उदाहरण देखें-
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1 {
border: 15px solid transparent;
padding: 12px;
border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
width: 100px;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/im
ages/mongodb.png') 20 round";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>Change the above paragraph border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
COLLAPSE BORDER बटन पर क्लिक करने पर -
