CSS Border Image Property
HTML Element का एक भाग Border भी होता हैं। जो Element के चारों तरफ Apply होती हैं। जिससे Element का Box Model स्पष्ट नजर आता हैं। Border Set करने के लिए CSS border Property का इस्तेमाल किया जाता हैं। जिससे Elements पर Solid Color में Border Apply हो जाती हैं।
लेकिन, Designing को ज्यादा Personalize बनाने के लिए Color Border काफि नही थी। इसलिए Image Border Feature को भी Develop किया गया। ताकि Elements पर Image Border Define की जा सके। किसी Image को Border बनाने के लिए CSS में Border Image Property को Develop करके जोडा गया। Border Image Property द्वारा अब आसानी से हम किसी भी Image को Border बना सकते हैं।
Different Type of Border-Image Properties
Border Image Property द्वारा किसी Image को Border बनाना और उसे नियत्रिंत करना भी बडा आसान हैं। क्योंकि CSS border-image Property द्वारा इस कार्य के लिए कई Properties उपलब्ध करवाई गई हैं।
Border Image Source Property
इस Value द्वारा Image Source को Define किया जाता हैं। जिस Image को हम Border बनाना चाहते हैं। मतलब उस Image का File Path बताना पडता हैं कि यह Image इस Directory में उपलब्ध हैं। Image Source को इस प्रकार Define किया जाता हैं।
{border-image-source: url(“image full path”);}
Border Image Slice Property
Border Image Property किसी Image को Border बनाने के लिए उस Image को 9 भागों में बांटती हैं। जिसे Technical भाषा में Image Slicing कहा जाता हैं। किसी Image को 4 कोनों (Corners), 4 Sides (Top, Bottom, Left, Right), और Center में बांटा गया हैं। इसी प्रक्रिया को Slice कहा जाता हैं। इस Property की Values को Number (अधिकतर px में), Percentage और Fill में Define किया जाता हैं। Fill Value द्वारा Image का Center Part भी Border Image से Cover हो जाता हैं। Slice को इस प्रकार Define किया जाता हैं।
{border-image-slice: number | % | fill;}
Border Image Width Property
इस Value द्वारा Image Border की Width यानि मोटाई को तय किया जाता हैं। Border-Image-Width Property की Value को px में Declare कर सकते हैं।
{border-image-width: number;}
Border Image Outset Property
इस Property द्वारा Content और Border के बीच की दूरी को Set किया जाता हैं। जिसे Number Value द्वारा Declare किया जाता हैं।
{border-image-outset: number;}
Border Image Repeat Property
इस property द्वारा Border के Behave को Set किया जाता हैं कि Image Border किस प्रकार दिखाई दें। इस कार्य के लिए 3 Values का इस्तेमाल किया जाता हैं।
- Stretch – इस Value द्वारा Image खींची जाती हैं ताकि वह Element Width को Cover कर सके।
- Repeat – इस Value द्वारा Image को Repeat किया जाता हैं।
- Round – इस Value द्वारा भी Element Width को Cover करने के लिए Image को Repeat करवाया जाता हैं।
Border Image Property
यह किसी Border को Image बनाने के लिए Shorthand Property होती हैं। इसके द्वारा सभी Properties को एक ही Style Rule में Declare किया जाता हैं। किसी Image को Border बनाने के लिए border-image Property के साथ border Property को Declare करना अनिवार्य हैं।
Border Image Property General Syntax
{border-image: source | slice | width | outset | repeat | initial | inherit;}
Border Image Property Example
<!DOCTYPE html>
<html>
<head>
<title>CSS border-image Property Example</title>
<style type=”text/css”>#div1 {
padding:10px;border: 2px solid;border-image:url(border.png) 50 round;
}#div2 {
padding:10px;border: 2px solid;border-image:url(border.png) 20% round;
}
padding:10px;border: 2px solid;border-image:url(border.png) 30% round;
}
padding:10px;border: 2px solid;border-image:url(border.png) 30% stretch;
}
</head>
<body>
<div id=”div1″>This is Div1.</div>
<div id=”div2″>This is Div2.</div>
<div id=”div3″>This is Div3.</div>
<div id=”div3″>This is Div4.</div>
</body>
#div3 {
#div4 {
</style>
<p>नीचे हम 3 Div Define कर रहे हैं। और तीनों Div पर हम अलग-अलग प्रकार से Image Border लगाऐंगे। हम इस Image को Border के रुप में इस्तेमाल कर रहे हैं।</p>
<img src=”border.png” />
<p>ऊपर दिख रही Image को Border के लिए इस्तेमाल किया जा रहा हैं.</p>
</html>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment