rebanada-de-imagen-del-borde | Trucos CSS - Trucos CSS
CSS border-image-slice
le dice al navegador dónde "cortar" una imagen que se usa para crear las partes de los bordes de un elemento.
.element {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 30%;
border-image-repeat: repeat;
}
Él border-image-slice
La propiedad se define en Nivel de especificación del módulo CSS Backgrounds and Borders 3.
Cuando se corta el borde de la imagen, se divide en nueve secciones (las cuatro esquinas, los cuatro lados y el medio) dibujando cuatro líneas de corte invisibles en la imagen que forman regiones similares a cuadrículas. esta cuadrícula de líneas de corte desde los lados correspondientes de la imagen.
- Las áreas 1-4 representan las cuatro esquinas.
- Las áreas 5-8 representan las cuatro regiones laterales.
- La zona 9 representa el área media.
demostración
Ajustar border-image-slice
valores en la siguiente demostración para ver cómo se compensa la imagen en diferentes longitudes o porcentajes.
Sintaxis
border-image-slice: [<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?
- Valor inicial:
100%
- Se refiere a: todos los elementos (incluido
::first-letter
pseudo-elemento) a excepción de los elementos de la tabla interna cuandoborder-collapse
se establece encollapse
. - Heredado: no
- Porcentajes: en relación con el tamaño de la imagen de origen
- Valor calculado: de uno a cuatro valores, cada uno de ellos un número o un porcentaje; suma un
fill
palabra clave si se especifica - Tipo de animación: por valor calculado
border-image-slice
toma entre uno y cuatro valores que especifican dónde se corta la imagen del borde a lo largo del lado correspondiente de cada valor.
- Un valor: Establece los cuatro lados (superior, derecho, inferior e izquierdo) en un desplazamiento igual.
- Dos valores: El primer valor establece el desplazamiento de los lados superior e inferior; el segundo valor establece el desplazamiento para los lados izquierdo y derecho.
- Tres valores: El primer valor establece el desplazamiento del lado superior; el segundo valor establece el desplazamiento para los lados derecho e izquierdo; el tercero establece el desplazamiento para el lado inferior.
- Cuatro valores: Establece el desplazamiento de cada lado en el sentido de las agujas del reloj, empezando por el lado superior: superior, derecho, izquierdo e inferior, respectivamente.
Valores
/* Single value */
/* Sets all four sides */
border-image-slice: 20;
border-image-slice: 30%;
/* Two values */
/* top and bottom | right and left */
border-image-slice: 30% 20;
border-image-slice: 10% 30%;
border-image-slice: 20% 10%;
/* Three values */
/* top | left and right | bottom */
border-image-slice: 40 31 11;
border-image-slice: 12 41 15;
border-image-slice: 10% 30% 5%;
/* Four values */
/* top | right | bottom | left */
border-image-slice: 15% 20 10% 10;
border-image-slice: 10 30 40 10;
border-image-slice: 15% 20 10% 40;
/* Optional `fill` value */
border-image-slice: 10 fill;
border-image-slice: 30% 20 fill;
border-image-slice: 40 31 11 fill;
border-image-slice: 10 30 40 10 fill;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
number [0,∞]
Esto representa un valor de longitud en píxeles de cero a infinito si la imagen del borde es un mapa de bits. Si la imagen del borde es una imagen basada en vectores, como SVG, sin dimensiones nativas, el número se basa en las coordenadas vectoriales.
La siguiente demostración es un ejemplo de un mapa de bits donde border-image-slice
la propiedad se establece en 125
resultando en rebanadas que son compensadas por 125px
.
Algunas cosas a tener en cuenta al trabajar con valores de longitud:
- No se permiten valores negativos.
- Se calculan valores que son más grandes que el tamaño de la imagen
100%
. - Si la suma de los lados izquierdo y derecho es mayor que el ancho de la imagen, entonces las áreas superior, inferior y central están vacías, como si se usara una imagen transparente. Lo mismo se aplica a las situaciones en las que la suma de los valores superior e inferior es mayor que la altura de la imagen: las áreas izquierda, derecha y central estarán vacías.
percentage [0,∞]
Los porcentajes son relativos al tamaño de la imagen del marco. por ejemplo, un border-image-slice: 50%
es igual a 100px
cuando se establece en un 200px
- imagen cuadrada.
La siguiente demostración es un ejemplo de un 740px
X 493px
mapa de bits donde border-image-slice
la propiedad se establece en 10%
resultando en rebanadas que son compensadas por 74px
(740px * 10%
) en los lados superior e inferior y 49.3px
(493px * 10%
) en los lados izquierdo y derecho.
fill
(opcionalmente)
Él fill
valor para CSS border-image-slice
actúa como una imagen de fondo para la región central, rellenándola con la imagen del borde que le proporcione. a voluntad valor que ignora por completo el límite numérico en el número máximo de valores border-image-slice
Esto significa que si se establecen los cuatro valores para los bordes superior, derecho, inferior e izquierdo, podemos establecer fill
como el quinto valor que llena la mitad del elemento con la imagen del borde.
.container {
/* top | right | bottom | left | middle */
border-image-slice: 78 65 70 75 fill;
}
Y no importa donde lo pongamos fill
en la declaración: ¡todos los pedidos funcionan!
.container {
/* This is valid too! */
border-image-slice: 78 65 fill 70 75;
}
En el siguiente ejemplo, fill
La palabra clave se usa para aplicar la imagen del borde al área central del elemento:
Para fill
valor para que funcione, primero debe establecer al menos un valor para border-image-slice
Sin esto, no se muestra nada en la región central.
Deja una respuesta