0 FPS

Propiedad CSS : border-image-slice

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.

La web está en segundo plano, animación en pausa.

Cargando animación...

Esta propiedad nos permite especificar la porción de la imagen que se va a utilizar para el borde. Para entendernos mejor tenemos que pensar en una imagen dividida en 9 partes (3 filas y 3 columnas).

Por ejemplo la imagen de la derecha tiene 90 píxeles de ancho y de alto, por lo tanto si la dividimos equitativamente en 9 partes cada celda ocupara 30x30.

Sintaxis

border-image-slice: ValorTRBL;
border-image-slice: TopBottom LeftRight;
border-image-slice: Top LeftRight Bottom;
border-image-slice: Top Left Bottom Right;

/* 1 valor para todos los costados. */
/* 2 valores : arriba y abajo, derecha y izquierda. */
/* 3 valores : arriba, derecha y izquierda, abajo.*/
/* 4 valores : arriba, derecha, abajo, izquierda. */

Podemos especificar hasta 4 valores (uno por cada costado).
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.

Valor

Permite definir el tamaño que se extraerá de la imagen origen. Se puede especificar un valor numérico o un porcentaje, los valores numéricos representarán píxeles para imagénes rasterizadas, y coordenadas para las imagenes vectorizadas.

Código de ejemplo

Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

	Soportado a partir de la versión 15
	Soportado a partir de la versión 16
	Soportado a partir de la versión 15
	Soportado a partir de la versión 6
	Soportado a partir de la versión 11

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Usuario
Password

Sintaxis

Código de ejemplo

Compatibilidad

Enlaces relacionados