HTML DOM BorderImageSlice प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि बॉर्डर इमेज को क्षेत्रों में कैसे विभाजित किया जाता है। यह बॉर्डर इमेज ऑफ़सेट को प्रतिशत, संख्या या वैश्विक मानों में निर्दिष्ट करके किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैBorderImageSlice प्रॉपर्टी सेट करना -
object.style.borderImageSlice = "number|%|fill|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| संख्या | इसका उपयोग रेखापुंज छवि में पिक्सेल या वेक्टर छवि में वेक्टर निर्देशांक को दर्शाने के लिए किया जाता है। |
| % | इनका उपयोग चित्र के आकार के सापेक्ष क्षैतिज और ऊर्ध्वाधर ऑफसेट को निर्दिष्ट करने के लिए किया जाता है। इसका डिफ़ॉल्ट मान 100% है। |
| बीमार | इसका उपयोग बॉर्डर-इमेज मध्य भाग को संरक्षित करने के लिए किया जाता है। |
| प्रारंभिक | इस गुण को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को इनहेरिट करने के लिए। |
आइए बॉर्डरइमेज स्लाइस प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
}
#b1 {
border: 30px solid transparent;
padding: 5px;
font-size:20px;
border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
border-image-slice: 60%;
}
</style>
<script>
function changeBorderSlice(){
document.getElementById("b1").style.borderImageSlice="10%";
document.getElementById("Sample").innerHTML="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉर्डर स्लाइस बदलें” . पर क्लिक करने पर बटन -
