बॉर्डर-इमेज-आउटसेट गुण
border-image-outset गुण
तत्व की सीमा के बाहर बॉर्डर को स्थानांतरित करने की अनुमति देता है। मान के रूप में
माप की इकाइयों के बिना एक संख्या निर्दिष्ट की जाती है
या कोई भी आकारों के लिए इकाइयाँ
, प्रतिशत को छोड़कर। यदि इकाइयों के बिना
एक संख्या निर्दिष्ट की जाती है, तो यह एक गुणक है,
जिससे border-width गुण के मान
गुणा किए जाते हैं।
नकारात्मक मान समर्थित नहीं हैं।
बॉर्डर के लिए छवियों पर अधिक विस्तृत जानकारी के लिए
border-image गुण देखें।
सिंटैक्स
सिलेक्टर {
border-image-outset: धनात्मक संख्या;
}
उदाहरण . संख्या
border-image-outset का मान
3 पर सेट करें जब माउस को तत्व पर घुमाया जाए।
इसके परिणामस्वरूप बॉर्डर 26px*3 पर स्थानांतरित हो जाएगी -
3 गुना दूर, border-width में निर्दिष्ट
इसकी चौड़ाई से:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
उदाहरण . पिक्सेल
border-image-outset का मान
30px पर सेट करें जब माउस को तत्व पर घुमाया जाए।
इसके परिणामस्वरूप बॉर्डर 30px पर स्थानांतरित हो जाएगी:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
यह भी देखें
-
border-imageगुण,
जो बॉर्डर छवि के लिए एक शॉर्टहैंड है -
border-image-sourceगुण,
जो बॉर्डर के लिए छवि पथ निर्दिष्ट करता है -
border-image-sliceगुण,
जो बॉर्डर के लिए छवि को विभाजित करता है -
border-image-repeatगुण,
जो बॉर्डर के लिए छवि दोहराव निर्दिष्ट करता है -
border-image-widthगुण,
जो बॉर्डर के लिए छवि आकार निर्दिष्ट करता है
