Sto creando un menu di navigazione in html e css, ma voglio che il bordo destro di ogni elemento di navigazione sia un'immagine.È possibile assegnare un'immagine a bordo-destra?
ho cercato
border-right:url(image.jpg);
Ma questo non ha funzionato.
Come faccio?
È possibile utilizzare un'immagine di sfondo e quindi posizionare l'immagine di sfondo a destra di ciascun elemento. Di solito questo andrebbe sul tag a o li. Per esempio:
#primaryNav a:link {
background-image: url('image.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
Se non si desidera che il confine applicato fino all'ultimo (quando si utilizza background-position: right;) o prima (per background-position: left;) elemento del menu, quindi provare le :last-child e :first-child selettori.
#primaryNav a:last-child {
background: none;
}
C'è una proprietà css chiamata border-image che potrebbe essere quello che stai cercando. Non sono sicuro di quale sia l'attuale supporto del browser per questo ...
In realtà non è consigliabile farlo in questo modo. Vedere questo thread per i dettagli: How do I set a border-image?
Questa è in realtà una nuova funzionalità di CSS 3 e la proprietà è denominata border-image. Sfortunatamente, è il not yet widely supported dai browser di oggi in quanto è ancora una raccomandazione per i candidati.
#primaryNav a:link { background: url('image.jpg') no-repeat right;
display: block; }
genere buona norma codice tuo background di proprietà di su una sola riga.
È possibile impostare il bordo personalizzato. In alto, a sinistra e in basso sarà 0 px e si imposta un'immagine di bordo. Se vuoi decorare questi bordi con altri stili, usa sub div.
immagine Destra interamente decorato div style è:
border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;