borde-imagen-outset | Trucos CSS - Trucos CSS

La propiedad CSS border-image-outset establece el espaciado entre elementos border-image área y cuánto se extiende más allá del límite del elemento.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

Él border-image-outset La propiedad se define en Nivel de especificación del módulo CSS Backgrounds and Borders 3Se llama la propiedad "Edge Overhang", que describe perfectamente para qué está diseñado: permitir que el área de la imagen del borde cuelgue sobre el cuadro del borde del elemento.

Sintaxis

border-image-outset: [<length [0,∞]> | <number [0,∞]>]{1,4}

• Valor inicial: 0
• 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: no hay
• Valor calculado: cuatro valores, cada uno de los cuales es un número o una longitud absoluta
• Tipo de animación: por valor calculado

border-image-outset toma entre uno y cuatro valores, como margin y padding propiedades abreviadas:

• Un valor: Coloca los cuatro lados a la misma distancia inicial.
• Dos valores: El primer valor establece la salida para los lados superior e inferior; el segundo valor establece la salida para los lados izquierdo y derecho.
• Tres valores: El primer valor establece la salida para el lado superior; el segundo valor establece la salida para los lados derecho e izquierdo; el tercero establece la salida para el lado inferior.
• Cuatro valores: Establece el origen de cada lado en el sentido de las agujas del reloj, empezando por el lado superior (superior, derecho, inferior e izquierdo en ese orden).

Valores

/* Length value (includes unit) */
border-image-outset: 2rem;

/* Number value (unitless) */
border-image-outset: 2;

/* Single value: Sets all four sides */
border-image-outset: 2;
border-image-outset: 2rem;
border-image-outset: 32px;

/* Two values: top and bottom | left and right */
border-image-outset: 4 6rem;
border-image-outset: 2 3rem;
border-image-outset: 1 24px;

/* Three values: top | left and right | bottom */
border-image-outset: 4rem 2 5rem;
border-image-outset: 5 8rem 10rem;
border-image-outset: 3 6 9;

/* Four values: top | right | bottom | left */
border-image-outset: 15 4rem 4 10rem;
border-image-outset: 2 5 13rem 4;
border-image-outset: 2 5 3 7rem;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

<length [0,∞]>

La longitud es un número con una unidad CSS arbitraria, como 10px, 1.35rem, 50%, 25dvhetc. — y se utiliza para establecer las dimensiones de alto y ancho del comienzo de la imagen.

.container{
  /* Sets dimensions on all four sides */
  border-image-outset: 2rem;
}

El ejemplo anterior especifica un 2rem unidad de longitud para top, right, bottomy left las salidas en la frontera, por lo que cada país es 2rem en longitud.

<number [0,∞]>

El número es como un <length> value, CSS solo sin unidades Cuando especificamos un número sin unidades para el valor de una propiedad, ese número es relativo a border-width El valor utilizado es igual a border-image-outset valor multiplicado por border-width valor.

border-image-outset = <number> * border-width

Digamos que tenemos la siguiente regla de estilo:

.container {
  border-image-outset: 4;
  border-width: 1rem;
}

multiplicamos border-image-outset sin una unidad <number> valor (4) por border-width valor (1rem), lo que nos da un desplazamiento total de la imagen límite de 4rem.

border-image-outset = 4 * 1rem = 4rem

border-image-outset contra border-image-width

No son lo mismo, por supuesto, aunque se comportan de manera similar en algunos aspectos en cuanto a sus valores, por ejemplo, ambas propiedades aceptan. <length> y <number> valores y hasta cuatro valores en una declaración.

Sin embargo, las diferencias entre las dos propiedades son evidentes en la forma en que cada propiedad afecta de manera única a una parte de la imagen límite. border-image-width afecta la dimensión física del límite de la imagen. border-image-outset afecta la distancia Entre La imagen del marco y el cuadro de contenido que permite que la imagen del marco se extienda más allá del marco.

Un par de cosas a tener en cuenta

Algunas cosas más sobre border-image-outset propiedad que vale la pena conocer:

• Es importante configurar box-sizing de elementos a border-boxes decir. * { box-sizing: border-box; }Esto evita que se agreguen bordes y relleno al ancho físico del elemento y que el elemento parezca más grande de lo que debería.
• Los valores negativos son No esta permitido.
• A border-image que se representa fuera del borde de la línea recta no activa un desplazamiento Las partes de desbordamiento son invisibles para los eventos del mouse y no capturan eventos.
• Aunque nunca provocan un mecanismo de desplazamiento, las imágenes semilla aún pueden ser recortadas por un elemento anterior o por la ventana gráfica.

demostración

Cambio border-image-outset, border-image-widthy border-width Valores a continuación para ver cómo cada entrada afecta el tamaño de la imagen.

Compatibilidad con navegador

Más información

Conectado