Característica border-image-slice en CSS

por
Característica border-image-slice en CSS

La propiedad border-image-slice CSS divide la imagen especificada por la propiedad border-image-source en nueve áreas: cuatro esquinas, cuatro bordes y el centro.

Funciones border-image-slice css

Valor inicial100%
Aplicado aTodos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece border-collapse a collapse.
HeredableNo
MóvilNo
Valor calculadoDe uno a cuatro valores relativos <percentage> o absolutos <length>, además de la palabra reservada fill si se justifica.
/* border-image-slice: slice */ 
border-image-slice :  30%; 
/* border-image-slice: vertical horizontal */ 
border-image-slice :  10%  30%;
/* rebanada de imagen de borde: superior horizontal inferior */ 
border-image-slice : 30 30% 45;
/* border-image-slice: arriba a la derecha abajo a la izquierda */ 
border-image-slice :  7  12  14  5; 
/* border-image-slice: ... fill */ 
/* Este valor se puede colocar en cualquier lugar */ 
border-image-slice :  10%  fill  7  12;

/* valores globales */ 
border-image-slice : inherit;
border-image-slice : initial;
border-image-slice : unset;

Los cuatro valores controlan la posición de las líneas de corte, y si no especificamos los cuatro valores, los valores se tomarán de acuerdo con el patrón seguido de las propiedades que aceptan cuatro valores en CSS.

El área central no se usará en el marco, pero se puede usar como imagen de fondo background-image si se establece la palabra reservada. Tenga en fill cuenta que esta palabra reservada se puede colocar en cualquier lugar entre los valores de esta propiedad.

Propiedades conocidas border-image-repeat, border-image-width y border-image-outset cómo se utilizarán estas imágenes.

Tenga en cuenta que la propiedad abreviada border-image puede restablecer esta propiedad a su valor predeterminado.

Ejemplos y aplicaciones

Consulte la página border-image para ver ejemplos del comportamiento de diferentes valores.

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico15.015.011156

Características generales

Esta propiedad puede tomar uno, dos, tres o cuatro valores.

  • Si se especifica un valor, es un valor slice.
  • Si se especifican dos valores, se establecen las posiciones vertical y horizontal.
  • Donde se especifican tres valores, se establecen las posiciones superior, horizontal e inferior.
  • Si se especifican cuatro valores, se establecen las posiciones superior, derecha, inferior e izquierda.

El valor se puede colocar fill entre cualquier valor.

slice

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de todas las líneas de partición, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

horizontal

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de las líneas de partición que se relacionan con los bordes horizontales, es decir, las líneas de partición izquierda y derecha, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

vertical

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de las líneas de partición que se conectan a los bordes verticales, es decir, las líneas de partición superior e inferior, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

top

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de la línea divisoria superior, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

bottom

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de la línea divisoria inferior, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de la línea divisoria derecha, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

left

Este valor es un número <number> o un porcentaje del <percentage> desplazamiento de la línea divisoria izquierda, y el número representa el <number> número de píxeles para mapas de bits y las coordenadas para imágenes vectoriales.

Los porcentajes <percentage> dependen del largo del alto o ancho de la imagen. No se permiten valores negativos. Si se especifican valores mayores que el alto o ancho, su valor será 100%.

fill

Esta palabra reservada se utiliza para mostrar la parte central de la imagen como imagen de fondo.

Estructura border-image-slice css

border-image-slice: <number-percentage>{1,4} && fill?;

Tenga en cuenta que la palabra reservada se puede colocar fillen cualquier orden de valores.

<number-percentage> = <number> | <percentage>

Vea también

  • La página de propiedades establecido por la propiedad de acceso directo border-image: border-image-source, border-image-width, border-image-outset y border-image-repeat.
  • La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style, y border-color.