Immagine bordo superiore in CSS3

Question

Ho usato border, border-top-image, border-image e nessuno sembra fare ciò che sto cercando.

Ho il seguente CSS:

#footer { 
    overflow: hidden; 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
    padding: 26px 0 30px 0; 
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg'); 
    font-size: 0.8461538461538462em; 
    color: #aaa; 
} 

Questo non sembra applicare al sito che sto cercando di lavorare, ho provato in Firefox e Chrome.

voglio solo far comparire l'immagine sul bordo superiore e il desiderio di avere altri confini (quindi è un po 'come un <hr />)

Answer 1

Non credo che ci sia una tale proprietà come border-top-image per dare immagine bordo a qualsiasi lato di un elemento - Usa

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round; 

ma dare bordo attorno a tutti i lati. Per rimuovere bordo intorno resto dei lati che ho dato -

border-bottom:0; 
border-left:0; 
border-right:0; 

ha funzionato ed ecco il mio violino - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

L'immagine di confine è specificato come un URI, per due gruppi differenti: L'URI di fino tre immagini possono essere specificate per ciascuno dei quattro bordi del bordo. Se viene fornito un URI di immagine, la prima tessera è centrata sulla linea di confine. Se vengono forniti due URI di immagine, si incontrano al centro della linea di confine con la prima immagine posizionata nella parte superiore o sinistra del centro. Se vengono forniti tre URI di immagine, il secondo diventa il centro e non affianca. Gli altri due sono posizionati su entrambi i lati dell'immagine centrale, con il primo in cima o sul lato sinistro del centro e il terzo in basso o a destra.

Per maggiori dettagli vedi w3.org

Answer 3

C'è la proprietà border-image-width: a b c d;. I particolari:

• a-d sono le larghezze del superiore, destro, inferiore e bordi sinistro, rispettivamente
• valori di annuncio possono essere nella forma:
  • [x]px
  • [x] - multipli di confine -valore di larghezza
  • [x]% - percentuale della sezione immagine (appare non funzionante in Safari 7)
  • auto - derivano dalla larghezza della corrispondente fetta dell'immagine
• il valore predefinito è 1.
• se si omette d, il valore di b viene utilizzato per il bordo sinistro larghezza
• se si omette anche c, il valore di a viene utilizzato anche per il bordo inferiore larghezza
• se anche si omette b, il valore della a viene utilizzato per tutti i confini :)

Quindi per la vostra esempio si potrebbe usare:

border-image-width: 100% 0 0 0; 

Alternativamente il border-image proprietà scorciatoia include border-image-width come parametro, quindi in una linea di CSS:

border-image: url(image.png) 100% 0 0 0/[desired_border_width]px 0 0 0 repeat; 

Questa utilizza l'intera immagine per la porzione superiore ("100% 0 0 0") e la applica come bordo superiore alla larghezza desiderata.

Answer 4

un'altra soluzione - creare visiva "PRIMA" phseudo-elemento:

.yourDiv::before{ 
    background:url("http://lorempixel.com/200/100/"); 
    width:100%; 
    height:20px; 
}