CSS border image information in Hindi.
border-image Longhand use border image.
border-image-source:url("image link");
border-image-width:10px 12px 13px 14px;
border-image-repeat:space round; border-image-slice:100 80 70 85; border-image-outset:5px 2px 3px 6px;
shorthand
source | slice | width | outset | repeat
border-image shorthand image 👉
(1) 👉 border-image:url(" image link") 100 80 70 85/10px 12px 13px 14px/5px 2px 3px6px space round;
border-image Longhand use border gradient.
border-image:linear-gradient(145deg,#F5515F,#A1051D);
border-image-width:10px 12px 13px 14px;
border-image-repeat:space round; border-image-slice:100 80 70 85; border-image-outset:5px 2px 3px 6px;
shorthand
source | slice | width | outset | repeat
border-image shorthand gradient 👉
(1) 👉 border-image:linear-gradient(145deg,#F5515F,#A1051D); 100 80 70 85/10px 12px 13px 14px/5px 2px 3px6px space round;border-image:url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-2.png") 33% 33% 33% 33%/1.5em 1.5em 1.5em 1.5em/0px 0px 0px 0px round round;}
#EY .XY:nth-child(2){border-image-slice:15 15 15 15 fill;border-image-slice:15 15 15 15 fill;
border-image:url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-3.png") 15 fill/10/0 round;border-image:url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-4.png") 13/13px/2px repeat round;border-image:url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png") 12/12px/0px round;border-image:url("https://mdn.github.io/css-examples/tools/border-image-generator/border-image-6.svg") 42/42px/0px round;border-image:-webkit-repeating-linear-gradient(45deg,red,blue 21px) 13/12px/2px repeat;border-image:repeating-linear-gradient(to bottom right,cyan,blue,red,yellow) 13/12px/2px round;border-image: repeating-conic-gradient( from 3deg at 50% 50%, green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg) 40/12px/2px round;border-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg) 13/12px/1px repeat;border-image:radial-gradient(closest-corner at 50% 50%,
red 20%,
orange 20% 40%,
yellow 40% 60%,
green 60% 80%,
blue 80%) 60/13px/0px round;border-image:linear-gradient(to bottom left,green,blue,red) 40/12px/0px repeat;border-image:repeating-linear-gradient(to bottom right,hotpink,blue) 10/12px/0px round;border-image:radial-gradient(hotpink 50%,red) 40/12px/0px round;border-image:repeating-linear-gradient(145deg,#65799b,#5e2563) 20/15px/0px round;border-image:linear-gradient(145deg,#00cdff,#4218d8) 20/15px/0 round;border-image:repeating-linear-gradient(145deg,#ff9897,#f650a0) 20 10 15 50/12px 13px 15px 10px/0px 1px 2px 2px repeat round;border-image:linear-gradient(to right,#2F330A,#4218d8) 20/15px/0 round;border-image:linear-gradient(to bottom right,#33100A,#415386,#498641) 20/15px/0 round;border-image: repeating-conic-gradient( from 3deg at 50% 50%, green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg) 10/15px/0px round;border-image:linear-gradient(145deg,#7F00FF,#E100FF) 20/15px/0px round;border-image:linear-gradient(145deg,#aa076b,#61045f) 20/15px/0px repeat;border-image:linear-gradient(blue,#0F389F,hotpink) 20/15px/0px repeat;border-image:linear-gradient(to bottom right,rgba(0,255,100,.6),hsla(360deg,50%,60%,.9)) 2/15px/0px repeat;border-image:linear-gradient(cyan,hsla(260deg,50%,50%,.3),rgba(255,100,200,.5)) 5/15px/0px repeat;border-image:linear-gradient(to bottom right,red,#0F389F,rgb(255,100,60)) 5/15px/0px repeat;border-image:radial-gradient(closest-corner at 50% 50%,
red 20%,
hotpink 20% 40%,
cyan 40% 60%,
red 60% 80%,
blue 80%) 40/15px/0px repeat;border-image:linear-gradient(15deg,#f05f57,#360940) 10/15px/0px repeat;border-image:linear-gradient(145deg,#ffdf40,#ff8359) 20/15px/0px repeat;border-image:linear-gradient(to right,hotpink,blue,green) 10/15px/0px round;border-image:linear-gradient(to bottom left,cyan,yellow,orange) 10/15px/0px repeat;नमस्कार दोस्तों स्वागत है हमारे प्रेमी Coder website पर आज के इस पोस्ट में हम आपको css border image के बारे में पूरा जानकारी देंगे और सीएसएस बॉर्डर की जो प्रॉपर्टी हैं वह भी हम आपको बताएंगे इसके साथ ही उनकी वैल्यू एवं किस प्रकार उनको use करते हैं तो हम आपको कंप्लीट जानकारी देंगे।
CSS border image kya hai. सीएसएस बॉर्डर इमेज क्या है?
अब दोस्तों जान लेते हैं css बॉर्डर image के बारे में दोस्तों बॉर्डर इमेज जिस प्रकार css बॉर्डर होता है तो उसमें आप solid, groove या अन्य वैल्यू उपयोग करते हो तो इसमें उसके स्थान पर हम border इमेज का उपयोग करते हैं आप चाहे तो बॉर्डर इमेज की जगह पर आप css Gradient का भी उपयोग कर सकते हो। तो दोस्तों फाइनली आप बॉर्डर इमेज के बारे में समझ गए होंगे
CSS border image propertys सीएसएस बॉर्डर इमेज प्रॉपर्टी।
अब दोस्तों सीएसएस बॉर्डर इमेज में उपयोग होने वाली प्रॉपर्टी के बारे में जान लेते हैं
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
border image source:-
बॉर्डर इमेज सोर्स में हम जो बॉर्डर में इमेज लगाना चाहते हैं उसका लिंक इसमें ऐड करते हैं जैसे
border-image-source:url("image link");या हम CSS Gradient का उपयोग कर करते हैं जैसे
border-image:radial-gradient(red,yellow,blue);
border-image-slice
border-image-slice से जो हम बॉर्डर में इमेज या gradient लगाएंगे उसके साइज को कस्टमाइज करने के लिए प्रयोग करते हैं
border image width
border-image-width का उपयोग हम बॉर्डर को चौड़ाई देने के लिए करते हैं आप चाहे जितना चौड़ाई दे सकते हो और इसमें आप चार values दे सकते हैं अगर एक value देंगे
जैसे border-image-width:15px;
border-image-outset
border-image-outset इसका उपयोग हम गैप देने के लिए करते हैं इसमें हम चार values दे सकते हैं अगर एक value देंगे
border-image-outset:12px 10px;
12px top and bottom sides पर अप्लाई होगा।
10px right and left sides पर अप्लाई होगा।
अगर हम तीन values दें तब
border-image-outset:12px 10px 9px;
12px top पर और 10px right और left पर 9px bottom sites पर अप्लाई होगा।
अगर हम चार वैल्यू दें तब
border-image-outset:12px 10px 9px 8px;
- पहला वैल्यू टॉप side पर apply होगा।
- दूसरा वैल्यू राइट side पर apply होगा।
- तीसरा वैल्यू बॉटम side पर apply होगा।
- चौथा वैल्यू लेफ्ट side पर apply होगा।
border-image-repeat
border-image-repeat की चार values होती हैं
space, round, repeat,stretch.
इसका डिफॉल्ट वैल्यू stretch होता है
इसमें हम एक साथ दो वैल्यू दे सकते हैं
अगर हम एक value देंगे
चारों साइट पर अप्लाई होगा।
border-image-repeat:round;
border-image-repeat:round repeat;
दो वैल्यू देंगे तो वह पहला वैल्यू top and bottom पर और दूसरा वैल्यू right and left पर अप्लाई होगा।
0 Comments