Imagen de borde superior en CSS3

Intenta interpretar el código correctamente previamente a aplicarlo a tu trabajo y si ttienes algo que aportar puedes compartirlo con nosotros.

Solución:

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

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

pero da borde por todos lados. Para eliminar el borde alrededor del 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/

Ahí está el border-image-width: a b c d; propiedad. Los detalles:

• a-d son los anchos de los bordes superior, derecho, inferior e izquierdo, respectivamente
• Los valores del anuncio pueden tener la forma:
  • [x]px
  • [x] – múltiplos del valor del ancho del borde
  • [x]% – porcentaje del segmento de la imagen (parece no funcionar en Safari 7)
  • auto – derivar del ancho del segmento de imagen correspondiente
• El valor predeterminado es 1.
• si omites d, El valor de b se utiliza para el ancho del borde izquierdo
• si tu tambien omites c, El valor de a también se utiliza para el ancho del borde inferior
• si tu tambien omites b, El valor de a se usa para todas las fronteras 🙂

Entonces, para su ejemplo, podría usar:

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

Alternativamente el border-image la propiedad taquigráfica incluye border-image-width como 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;

Esto usa la imagen completa para el corte superior (“100% 0 0 0”) y la aplica como borde superior en el ancho deseado.

Otra solución – crear visual “ANTES DE” phseudo-elemento:

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

---

---

Utiliza Nuestro Buscador