libro de referencia CSS

reglas CSS @

propiedades CSS completas

CSS3 border-image-Atributo width CSS3 border-image-Atributo slice

CSS3 border-image-Uso y ejemplo de la propiedad source

border-image-El atributo source CSS especifica la posición de la imagen que se debe usar para el borde, en lugar deborder-styleEstilo del borde especificado por el atributo.

La tabla a continuación proporciona explicaciones de uso y historial de versiones de esta propiedad, así como la sintaxis de uso en scripts de JavaScript.

Valor predeterminado:	none
Aplicable a:	Esta propiedad se puede aplicar a cualquier elemento, pero cuando el elemento de tabla (como tr,th,td) del border-Cuando el valor de la propiedad collapse es collapse, el border-image-La propiedad source no es válida. También se aplica a::first-letter。
Herencia:	No
Animable:	NoVer Atributos de animación。
Versión:	CSS3nuevas características
Sintaxis de JavaScript:	object.style.borderImageSource="url(border.png)"

border-image-Sintaxis de uso de source

La sintaxis de este atributo es la siguiente:

border-image-source: none | image | initial | inherit

Los siguientes ejemplos muestran cómo usar border-image-Atributo source.

Ejemplo

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

Prueba y mira‹/›

Valor del atributo

La tabla a continuación describe los valores de esta propiedad.

Valor	Descripción
none	No hay imagen de borde, se utilizará el estilo de borde. Este es el valor predeterminado.
image	Especificar la posición de la imagen del borde.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el border del elemento padre-image-Valor calculado del atributo source.

Compatibilidad del navegador

border-image-La compatibilidad del navegador del atributo source, los números en la tabla a continuación representan la versión más baja del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.

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

Leer más

Consulte los siguientes tutoriales:CSS3 BorderyCSS Border。

Propiedades relacionadas:border-image，border-image-width，border-image-repeat，border-image-slice，border-image-outset，border。

CSS3 border-image-Atributo width CSS3 border-image-Atributo slice