Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
border-image-slice
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Resumen
La propiedad CSSborder-image-slice divide la imagen especificada porborder-image-source en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.
Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.
La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clavefill. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).
Las propiedadesborder-image-repeat,border-image-width yborder-image-outset definen cómo se usarán estas imágenes.
La propiedad abreviadaborder-image podría restaurar esta propiedad a su valor predeterminado.
| Valor inicial | 100% |
|---|---|
| Applies to | all elements, except internal table elements whenborder-collapse iscollapse. It also applies to::first-letter. |
| Heredable | no |
| Percentages | refer to the size of the border image |
| Valor calculado | one to four percentage(s) (as specified) or absolute length(s), plus the keywordfill if specified |
| Animation type | by computed value type |
Sintaxis
/* border-image-slice: slice */border-image-slice: 30%;/* border-image-slice: horizontal vertical */border-image-slice: 10% 30%;/* border-image-slice: top horizontal bottom */border-image-slice: 30 30% 45;/* border-image-slice: top right bottom left */border-image-slice: 7 12 14 5;/* border-image-slice: … fill *//* The fill value can be placed between any value */border-image-slice: 10% fill 7 12;/* Global values */border-image-slice: inherit;border-image-slice: initial;border-image-slice: unset;Valores
- slice
Es un valor
<number>o<percentage>de la separación de las cuatro líneas de corte. Un valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a100%.- horizontal
Es un valor
<number>o<percentage>de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.- vertical
Es un valor
<number>o<percentage>de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.- top
Es un valor
<number>o<percentage>de la separación de la línea de corte superior. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.- bottom
Es un valor
<number>o<percentage>de la separación de la línea de corte inferior. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.- right
Es un valor
<number>o<percentage>de la separación de la línea de corte derecha. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.- left
Es un valor
<number>o<percentage>de la separación de la línea de corte izquierda. El valor<number>representapíxeles para imágenes de mapa de bits ycoordenadas para imágenes vectoriales. A su vez, los valores<percentage>son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a100%.fillEs una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
inheritEs una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
Sintaxis formal
border-image-slice =
[<number [0,∞]>|<percentage [0,∞]>]{1,4}&&
fill?
Especificaciones
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-slice |