Imagen de borde superior en CSS3

Question

He utilizado border, border-top-image, border-image y ninguno parece hacer lo que estoy buscando.

Tengo el siguiente 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; 
} 

Esto no parece aplicarse a la página web que estoy tratando de trabajar, lo he probado en Firefox y Chrome.

sólo desea que la imagen aparece en el borde superior y el deseo de no tener otras fronteras (por lo que es como una especie de <hr />)

Answer 1

No creo que exista tal propiedad como border-top-image para dar borde de la imagen a cualquier lado de un elemento - uso

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

pero dan borde alrededor de todos los lados. Para eliminar borde alrededor resto de los lados que di -

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

funcionó y aquí está mi violín - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

La imagen Frontera se especifica como un URI, para dos grupos diferentes: El URI de hasta tres imágenes pueden ser especificadas para cada uno de los cuatro bordes del borde. Si se proporciona un URI de imagen, el primer mosaico se centra en la línea del borde. Si se proporcionan dos URI de imagen, se encuentran en el centro de la línea del borde con la primera imagen colocada en el lado superior o izquierdo del centro. Si se proporcionan tres URI de imagen, la segunda se convierte en el centro y no se ordena. Los otros dos se colocan a cada lado de la imagen central, el primero va en la parte superior o izquierda del centro y el tercero va en la parte inferior o derecha.

Para más refer W3.org

Answer 3

No es la propiedad border-image-width: a b c d;. Los detalles:

• a-d son las anchuras de la parte superior, derecha, abajo y los bordes izquierdo, respectivamente
• valores de anuncio pueden estar en la forma:
  • [x]px
  • [x] - múltiplos de frontera -valor de ancho
  • [x]% - porcentaje de la porción de la imagen (parece no funcionar en Safari 7)
  • auto - deriva del ancho del sector de imagen correspondiente
• el valor predeterminado es 1.
• si se omite d, el valor de b se utiliza para el borde izquierdo anchura
• si también omite c, el valor de a también se utiliza para el borde inferior anchura
• si también omite b, la valor de a se utiliza para todas las fronteras :)

Así que para su ejemplo, podría utilizar:

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

Alternativamente, la propiedad abreviada border-image incluye border-image-width como un parámetro, por lo que en una línea de CSS:

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

Este utiliza toda la imagen para el tramo superior ("100% 0 0 0") y lo aplica como la borde superior en el ancho deseado.

Answer 4

Otra solución - crear visual "antes" phseudo-elemento:

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