Jak używać obramowania tylko wzdłuż jednej strony?

Question

Mam obraz, który chciałbym ustawić jako obramowanie elementu, ale tylko jako dolną granicę: < - To jest malusieńka - ale jest tam.

Oto co mam do tej pory:

<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> 

Albo zobaczyć JS Fiddle: http://jsfiddle.net/eqpt5/.

Jak widać, powoduje to umieszczenie obrazu obramowania zarówno na górze, jak i na dole (i na bokach - chociaż nie można tego zobaczyć). Jak mogę umieścić obraz krawędzi tylko na dole używając border-image?

Answer 1

Zmień border-width:2px do border-width:0 0 2px

W ten sposób jesteś rzeczywiście ustawienie szerokości dolnej granicy 2px i pozostałe boki szerokość równa zeru

Demo http://jsfiddle.net/naveenksh/eqpt5/3/

Answer 2

border-bottom-width: 1px; 

Umieścić go po drugiej granicznej rzeczy zastąpić konkretnej stronie granicy.

możesz użyć skrótu, ale myślę, że jest to łatwiejsze do odczytania.

Answer 3

można dać border-top:none; jego działa dobrze jak na swoje pożądane wyniki ...

CSS

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

Poza górnym odpowiedź. Ponieważ obraz-obramowanie nadpisuje styl obramowania, aby uzyskać granice dla innych stron, po prostu zawiń div innym div, a następnie zadeklaruj granice.

HTML:

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

CSS:

#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; 

}