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 cuandoborder-collapse
se establece encollapse
. - 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%
, 25dvh
etc. — 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
, bottom
y 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 aborder-box
es 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-width
y border-width
Valores a continuación para ver cómo cada entrada afecta el tamaño de la imagen.
Deja una respuesta