Estoy haciendo un menú de navegación en html y css, pero quiero que el borde derecho de cada elemento de navegación sea una imagen.¿Puedes asignar una imagen al borde derecho?
me trataron
border-right:url(image.jpg);
Pero esto no funcionó.
¿Cómo lo hago?
Puede usar una imagen de fondo y luego colocar la imagen de fondo a la derecha de cada elemento. Por lo general, esto iría en la etiqueta a o en li. Por ejemplo:
#primaryNav a:link {
background-image: url('image.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
Si no desea que la frontera aplicada a la última (cuando se utiliza background-position: right;) o la primera (por background-position: left;) elemento en su menú a continuación, tratar los :last-child y :first-child selectores.
#primaryNav a:last-child {
background: none;
}
Hay una propiedad de css llamada border-image que podría ser lo que buscas. No estoy seguro de cuál es la compatibilidad actual del navegador ...
En realidad, no se recomienda hacerlo de esta manera. Ver este hilo para más detalles: How do I set a border-image?
Esta es en realidad una nueva característica de CSS 3 y la propiedad se llama border-image. Lamentablemente, es not yet widely supported por los navegadores de hoy, ya que todavía es una recomendación del candidato.
#primaryNav a:link { background: url('image.jpg') no-repeat right;
display: block; }
lo general una buena práctica para codificar el fondo de la propiedad de en una sola línea.
Puede establecer el tamaño de borde personalizado. Arriba, izquierda e inferior serán 0px y establecerán una imagen de borde. Si desea decorar estas fronteras con otro estilo, utilice sub div.
Imagen de la derecha decoreted div style es:
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;