domingo, 17 de febrero de 2013

Agregar imagen como borde con border-image CSS3


En esta ocasión vamos a ver como agregar una imagen como borde a un div, para ello CSS3 tiene una propiedad llamada border-image.

border-image:

border-image-source -> src de la imagen.
border-image-slice -> desplazamiento interno de la imagen.
border-image-width -> Especifica la anchura de border-image default auto.
border-image-outset ->  La cantidad de imágenes borde que soporta, es limitado.
border-image-repeat ->   stretch | round | repeat

 Esta propiedad es compatible en  IE9+, Firefox 4+, Chrome, Safari 5+ y Opera.

 border-image  -> Para todos los navegadores compatibles.
-moz-border-image -> Para versiones más antiguas de Firefox.
-webkit-border-image -> Para versiones de crhome y safari
-o-border-image -> Para versiones de Opera

Modo de uso ...

border-image: source slice width outset repeat;

Ejemplo: border-image: url(imagen.jpg) 40% 40% 120 120 round;





border image:
slide image: Ejemplo: 40% 40%
outset image: Ejemplo: 122 122
repeat image: