Manual de referencia CSS

CSS @reglas (RULES)

大全 de Atributos CSS

CSS3 border-image-Atributo slice CSS3 border-image-Atributo outset

CSS3 border-image-Uso y ejemplos de la propiedad 'repeat'

border-image-La propiedad 'repeat' de CSS especifica cómo se debe escalar o repetir la imagen del borde en su parte central para que se ajuste al tamaño del borde.

La siguiente tabla describe el uso y el historial de versiones de esta propiedad, así como la sintaxis de uso en scripts de JavaScript.

Valor predeterminado:	stretch
Aplica a:	Todos los elementos, pero cuando los elementos de tabla (como 'tr', 'th', 'td') tienen 'border'-El valor de la propiedad 'collapse' es 'collapse' cuando 'border'-image-La propiedad 'repeat' no es válida. También se aplica a::first-letter.
Herencia:	No
Animable:	No.Ver Atributos de animación.
Versión:	CSS3nueva característica
Sintaxis de JavaScript:	object.style.borderImageRepeat="round"

border-image-Sintaxis de uso de repeat

La sintaxis de este atributo es la siguiente:

border-image-repeat: [ stretch | repeat | round | space ]　1　o　2　values | initial | inherit

El siguiente ejemplo muestra cómo usar border-image-Atributo repeat.

Ejemplo

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px sólido transparente;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

Ver el‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
stretch	La imagen se estirará para llenar el área entre los bordes del borde. Este es el valor predeterminado.
repeat	La imagen se repetirá o se repetirá hasta que cubra el área entre los bordes del borde.
round	La imagen se repetirá o se repetirá hasta que cubra el área entre los bordes del borde. Si el área no puede llenar el número completo de bloques, se escalará la imagen para que se ajuste.
space	La imagen se repetirá o se repetirá hasta que cubra el área entre los bordes del borde. Si el área no puede llenar todos los azulejos, el espacio adicional se distribuirá alrededor de los azulejos.
initial	Establezca este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el borde del elemento padre-image-Valor calculado del atributo repeat.

Compatibilidad del navegador

border-image-Compatibilidad del navegador del atributo repeat, los números en la tabla a continuación indican la versión mínima de los navegadores que admiten el atributo; todos los navegadores principales admiten este atributo.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

Leer más

Consulte el tutorial:CSS3Borde,Borde de CSS.

Propiedades relacionadas:border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border.

CSS3 border-image-Atributo slice CSS3 border-image-Atributo outset