क्या CSS3 सीमा-छवि के प्रत्येक पक्ष के लिए एक अलग छवि का उपयोग करने का कोई तरीका है?

Question

Firefox और Safari पर, मैं निम्नलिखित सीएसएस के साथ सीमा के लिए एक छवि का उपयोग कर सकते हैं:

-moz-border-image: url(shadow_left.png) 0 7 0 7 round round; 
-webkit-border-image: url(shadow_left.png) 0 7 0 7 round round; 

हालांकि, मैं छोड़ दिया और सही के लिए एक अलग छवि का उपयोग करने के लिए एक रास्ता को समझ नहीं सकता। क्या ऐसा करने का कोई तरीका है जो आधुनिक ब्राउज़र द्वारा समर्थित है?

Answer 1

पिछला ड्राफ्ट, it's possible कहा का उपयोग करके:

border-top-image 
border-right-image 
border-bottom-image 
border-left-image 
border-top-left-image 
border-top-right-image 
border-bottom-left-image 
border-bottom-right-image 

हालांकि, current candidate recommendation for CSS Backgrounds and Borders (25 नवम्बर 2009) इन गुणों गायब हो गया। ऐसा लगता है कि आप अब प्रत्येक सीमा पक्ष के लिए अलग-अलग छवियों का उपयोग नहीं कर सकते हैं।

व्यक्तिगत नोट के रूप में, मैंने एक ही छवि के लिए झटके से बचने के लिए अलग-अलग छवियों का उपयोग नहीं किया होगा, एक बटन फ़ाइल में असम्पीडित, दबाए गए, होवर) को पैक करेगा और फिर सीएसएस को ऑफ़सेट करने के लिए उपयोग करें स्रोत छवि।

संपादित करें: border-top-image, border-left-image, आदि WD 2002-11-07 में मौजूद थे लेकिन WD 2005-02-16 में गायब हो गया।

EDIT2: आपको jquery.borderimage.js प्लगइन में रुचि हो सकती है।

Answer 2

CSS3 border-left-image (और ऊपर, दाएं, नीचे) की अनुमति देता है, मैं ब्राउज़र-विशिष्ट संस्करणों को ऐसा करने की अपेक्षा करता हूं। लेकिन इसका परीक्षण नहीं किया।

Answer 3

the CSS3 spec पढ़ना, अलग किनारों के लिए विभिन्न सीमाओं का उपयोग करने का कोई उल्लेख नहीं प्रतीत होता है। हालांकि, css3.info कुछ गुणों का उल्लेख करता है जो मौजूद होना चाहिए, लेकिन spec के अनुसार नहीं है।