Ejemplo
Especificar cómo repetir la imagen de la frontera:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Inténtalo tú mismo " Definición y Uso
La propiedad border-image-repetición especifica si la imagen de la frontera se debe repetir, redondeado o estirado.
Consejo: También mirar la imagen frontera propiedad (a shorthand property for setting all the border-image-* properties) .
| Valor por defecto: | stretch |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.borderImageRepeat="round" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
sintaxis CSS
border-image-repeat: stretch|repeat|round|initial|inherit;Note: Esta propiedad especifica cómo se escalan y alicatados las imágenes por los lados y la parte media de la imagen de la frontera. Por lo tanto, se puede especificar dos valores aquí. Si se omite el segundo valor, se supone que es el mismo que el primero.
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| stretch | Valor por defecto. La imagen se expande para llenar el área | Juegalo " |
| repeat | La imagen es de baldosas (repeated) para rellenar el área | Juegalo " |
| round | La imagen es de baldosas (repeated) para rellenar el área. Si no se llena el área con toda una serie de azulejos, la imagen se reajustarán por lo que encaja | Juegalo " |
| space | La imagen es de baldosas (repeated) para rellenar el área. Si no se llena el área con toda una serie de azulejos, el espacio adicional se distribuye alrededor de los azulejos | |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS3 tutorial: Imágenes CSS3 Frontera
CSS de referencia: border-image property
CSS Referencia: border-image-outset property
CSS de referencia: border-image-slice property
CSS de referencia: border-image-source property
CSS Referencia: border-image-width property
Referencia HTML DOM: borderImageRepeat property