Imágenes CSS3 Frontera
Con el CSS3 border-image propiedad, se puede establecer una imagen para ser utilizado como la frontera alrededor de un elemento.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Propiedad
El CSS3 border-image propiedad le permite especificar una imagen para ser utilizada en lugar de la frontera normal alrededor de un elemento.
La propiedad consta de tres partes:
- La imagen que se utiliza como la frontera
- Dónde cortar la imagen
- Defina si las secciones intermedias deben repetirse o se estiran
Vamos a utilizar la siguiente imagen (llamada "/css/border.png"):
El border-image propiedad toma la imagen y secciones que se presentan en nueve secciones, como un tablero de tres en raya. A continuación, coloca las esquinas en las esquinas, y las secciones centrales se repiten o se estira a medida que especifica.
Nota: Para border-image funcione, el elemento también necesita la border del conjunto de propiedades!
En este caso, las secciones centrales de la imagen se repiten para crear la frontera:
Una imagen como una frontera!
Aquí está el código:
Ejemplo
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Inténtalo tú mismo " En este caso, las secciones centrales de la imagen se estiran para crear la frontera:
Una imagen como una frontera!
Aquí está el código:
Ejemplo
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Inténtalo tú mismo "  | Consejo: El border-image propiedad es en realidad una propiedad resumida para la border-image-source , border-image-slice , border-image-width , border-image-outset y border-image-repeat propiedades. |
|---|
CSS3 frontera imagen - Diferentes valores de la rebanada
Diferentes valores rebanada cambia por completo el aspecto de la frontera:
Ejemplo 1:
border-image: url(border.png) 50 redonda;
Ejemplo 2:
border-image: url(border.png) 20% redonda;
Ejemplo 3:
border-image: url(border.png) 30% redonda;
Aquí está el código:
Ejemplo
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Propiedades del borde CSS3
| Propiedad | Descripción |
|---|---|
| border-image | Una propiedad abreviada para establecer todos los border-image-* propiedades |
| border-image-source | Especifica la ruta a la imagen para ser utilizado como una frontera |
| border-image-slice | Especifica cómo cortar la imagen Frontera |
| border-image-width | Especifica el ancho de la imagen de la frontera |
| border-image-outset | Especifica la cantidad en que el área de la imagen frontera se extiende más allá del borde de cuadro |
| border-image-repeat | Especifica si la imagen de la frontera se debe repetir, redondeado o estirado |