केवल एक तरफ सीमा छवि का उपयोग कैसे करें?

Question

मेरे पास एक छवि है जिसे मैं तत्व पर सीमा के रूप में सेट करना चाहता हूं, लेकिन केवल नीचे की सीमा के रूप में: < - यह किशोर है - लेकिन यह वहीं है।

<style> 
body { margin: 0; padding: 10px; } 
    h1 { 
background-color: red; 
    border: solid transparent; 
    border-width: 2px; 
    border-image: 2 repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII="); 
} 
</style> 
<h1>Bacon</h1> 
<p>Bacon ipsum dolor sit amet tenderloin drumstick ribeye filet mignon t-bone beef ribs. Tri-tip venison turkey salami drumstick chicken pastrami. Frankfurter pork jowl ball tip tail.</p> 

या जे एस फिडल देखें:: http://jsfiddle.net/eqpt5/

यहाँ मैं अब तक क्या मिल गया है है।

जैसा कि आप देख सकते हैं, यह सीमा छवि को ऊपर और नीचे दोनों तरफ रखता है (और पक्ष - हालांकि आप इसे नहीं देख सकते हैं)। border-image का उपयोग करके मैं केवल नीचे की ओर एक सीमा छवि कैसे लगा सकता हूं?

Answer 1

बदलें border-width:2px को border-width:0 0 2px

इस तरह आप वास्तव में सीमा नीचे चौड़ाई 2px सेट कर रहे हैं और अन्य पक्षों शून्य

डेमो के बराबर http://jsfiddle.net/naveenksh/eqpt5/3/

Answer 2

border-bottom-width: 1px; 

अपनी दूसरी सीमा सामग्री के बाद इसे एक विशिष्ट सीमा पक्ष को ओवरराइड करने के बाद रख दें।

आप छोटे हाथ का उपयोग कर सकते हैं लेकिन मुझे लगता है कि यह पठनीयता के लिए आसान है।

Answer 3

आप border-top:none; के अनुसार अपने ठीक काम कर रहा दे सकते हैं चौड़ाई अपने वांछित परिणाम ...

सीएसएस

h1 { 
background-color: red; 
    border: solid transparent; 
    border-width: 2px; 
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZGBgOMOABv7//48uxMDEQCQgWiFAgAEAjqADz4EvP7IAAAAASUVORK5CYII=") 2 repeat; 
    border-top:none; 
} 

DEMO

Answer 4

शीर्ष जवाब के अलावा। चूंकि सीमा-छवि सीमा-शैली को ओवरराइड करती है, दूसरी तरफ सीमाएं प्राप्त करने के लिए बस div को दूसरे div के साथ लपेटें और फिर सीमाएं घोषित करें।

HTML:

<div id="wrapper">    //div with border style 
<div id="content"></div>  //div with border image 
</div> 

सीएसएस:

#wrapper { 
border-top: 1px solid black; 
border-right: 1px solid black; 
border-bottom: 1px solid black; 
} 
#content { 
border-image: url(../images/blue-bg.png) 0 0 0 50; 
border-left-width: 10px; 

}