बॉर्डर-इमेज-स्लाइस प्रॉपर्टी
border-image-slice प्रॉपर्टी ब्राउज़र को निर्देशित करती है
कि छवि के कौन से हिस्से कोनों के लिए जाएंगे,
और कौन से हिस्से किनारों के लिए (और कौन सा हिस्सा
केंद्रीय होगा)। कोनों के लिए 4
हिस्से जाते हैं, किनारों के लिए 4
हिस्से जाते हैं और एक हिस्सा (केंद्रीय) एलिमेंट की
बैकग्राउंड के लिए जाता है
(वैकल्पिक, कीवर्ड fill)।
अधिक विस्तृत जानकारी के लिए प्रॉपर्टी देखें
border-image।
सिंटैक्स
<+css+> सिलेक्टर { border-image-slice:1-वें से 4-वें नंबर तक | 1-वें से 4-वें प्रतिशत तक;
}
<-css->
नंबर और प्रतिशत के साथ स्पेस से अलग
कीवर्ड fill भी हो सकता है।
वैल्यूज
| वैल्यू | विवरण |
|---|---|
| प्रतिशत | प्रतिशत की गणना छवि के आकार के सापेक्ष की जाती है। क्षैतिज चौड़ाई के सापेक्ष, ऊर्ध्वाधर — ऊंचाई के सापेक्ष। |
| नंबर | नंबर पिक्सेल हैं (रास्टर छवि के लिए) या निर्देशांक (वेक्टर छवि के लिए)। यूनिट निर्दिष्ट नहीं की जाती हैं। |
fill |
डिफॉल्ट व्यवहार यह मानता है कि छवि का केंद्रीय हिस्सा
हटा दिया जाएगा। इसे उपयोग में लाने के लिए,
नंबर या प्रतिशत के अतिरिक्त कीवर्ड fill का उपयोग करना
आवश्यक है।
|
पैरामीटर की संख्या
ऑफसेट 1, 2,
3 या 4 पैरामीटर ले सकता है। कृपया
ध्यान दें कि ऑफसेट के लिए यूनिट
नहीं लिखी जाती (उदाहरण के लिए, केवल 20,
20px नहीं)। मोटाई % में भी निर्धारित की जा सकती है।
| पैरामीटर की संख्या | विवरण |
|---|---|
1 |
सभी किनारों के लिए एक साथ मोटाई। |
2 |
1 2; - ऊपर और नीचे के लिए 1px, बाएं और दाएं के लिए 2px। |
3 |
1 2 3; - ऊपर के लिए 1px, बाएं और दाएं के लिए 2px, नीचे के लिए 3px। |
4 |
1 2 3 4; - ऊपर के लिए 1px, दाएं के लिए 2px, नीचे के लिए 3px, बाएं के लिए 4px। |
डिफॉल्ट वैल्यू: 100%(?)।
उदाहरण
html<div id="elem"></div>css#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
Результат:
उदाहरण
html<div id="elem"></div>css#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
Результат:
यह भी देखें
-
प्रॉपर्टी
border-image,
जो बॉर्डर-इमेज के लिए शॉर्टहैंड है -
प्रॉपर्टी
border-image-source,
जो बॉर्डर के लिए छवि का पथ निर्धारित करती है -
प्रॉपर्टी
border-image-repeat,
जो बॉर्डर के लिए छवि की पुनरावृत्ति निर्धारित करती है -
प्रॉपर्टी
border-image-width,
जो बॉर्डर के लिए छवि का आकार निर्धारित करती है -
प्रॉपर्टी
border-image-outset,
जो बॉर्डर के लिए छवि का ऑफसेट निर्धारित करती है