CSS बॉर्डर-इमेज-स्लाइस प्रॉपर्टी
उदाहरण
बॉर्डर इमेज को स्लाइस करने का तरीका निर्दिष्ट करें:
#borderimg {
border-image-slice: 30%;
}
परिभाषा और उपयोग
संपत्ति निर्दिष्ट करती है कि सीमा-छवि-स्रोतborder-image-slice
द्वारा निर्दिष्ट छवि को कैसे स्लाइस किया
जाए । छवि को हमेशा नौ खंडों में विभाजित किया जाता है: चार कोने, चार किनारे और मध्य।
जब तक भरण कीवर्ड सेट नहीं किया जाता है, तब तक "मध्य" भाग को पूरी तरह से पारदर्शी माना जाता है।
युक्ति: सीमा-छवि गुण (सभी सीमा-छवि-* गुण सेट करने के लिए एक आशुलिपि गुण) को भी देखें।
डिफ़ॉल्ट मान: | 100% |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.borderImageSlice="30%" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
सीएसएस सिंटेक्स
border-image-slice: number|%|fill|initial|inherit;
नोट: संपत्ति border-image-slice
एक से चार मान ले सकती है। यदि चौथा मान छोड़ दिया जाता है, तो यह दूसरे के समान होता है। यदि तीसरा भी छोड़ दिया जाता है, तो यह पहले जैसा ही है। यदि दूसरा भी छोड़ दिया जाता है, तो यह पहले जैसा ही है।
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस बॉर्डर इमेजेज
सीएसएस संदर्भ: सीमा-छवि संपत्ति
सीएसएस संदर्भ: सीमा-छवि-शुरुआत संपत्ति
CSS संदर्भ: बॉर्डर-इमेज-रिपीट प्रॉपर्टी
सीएसएस संदर्भ: सीमा-छवि-स्रोत संपत्ति
सीएसएस संदर्भ: सीमा-छवि-चौड़ाई संपत्ति
एचटीएमएल डोम संदर्भ: सीमा इमेजस्लाइस संपत्ति