bonus new member

https://librolibre.net/

masterjp

masterjp

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 cuando border-collapse se establece en collapse.
  • 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.
Artículo Recomendado:  Guía de configuración de estilos y CSS de temas de bloques de WordPress | trucos CSS

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 125resultando 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.
Artículo Recomendado:  Una API DAM de la nueva era Trucos CSS para agilizar los flujos de trabajo multimedia

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.

Compatibilidad con navegador

Más información

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir