borde-imagen-ancho | Trucos CSS - Trucos CSS

CSS border-image-width La propiedad se utiliza para especificar el ancho del archivo de imagen del marco proporcionado por CSS border-image-source Propiedad.

.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; 
}

Él border-image-width La propiedad se define en Nivel de especificación del módulo CSS Backgrounds and Borders 3Su función se describe como "drawareas", que es una descripción adecuada de cómo la propiedad dibuja un área a lo largo del borde exterior del elemento para reservar espacio para la imagen del borde.

Sintaxis

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

• Valor inicial: 1
• 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: Referido al ancho/alto del borde de la imagen
• Valor calculado: cuatro valores, cada uno un número o una palabra clave autoo calculado <length-percentage> valor
• Tipo de animación: por valor calculado

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

• Un valor: Establece los cuatro lados igualmente compensados
• 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 para cada lado en el sentido de las agujas del reloj, comenzando desde el lado superior (superior, derecho, inferior e izquierdo en ese orden)

Valores

/* Keyword value */
border-image-width: auto;

/* Single value */
/* Sets all four sides */
border-image-width: 20%;
border-image-width: 2rem;
border-image-width: auto;

/* Two values */
/* top and bottom | left and right */
border-image-width: 4rem 10%;
border-image-width: auto 3rem;
border-image-width: 2 2rem;

/* Three values */
/* top | left and right | bottom */
border-image-width: 10% 40% 4;
border-image-width: 5 auto 10;
border-image-width: 30% 60% auto;

/* Four values */
/* top | right | bottom | left */
border-image-width: 20 3rem 40% auto;
border-image-width: 2 10rem 10% 40%;
border-image-width: 40 auto 20% auto;

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

<length-percentage [0,∞]>

Él <length-percentage> valor especifica una longitud o un valor porcentual que se puede establecer en CSS border-image-width propiedad para especificar el ancho y el alto de la imagen del borde.

El valor de longitud determina las dimensiones de ancho y alto de la imagen en unidades CSS:

.container{
  /* top and bottom | left and right */
  border-image-width: 4rem 4.5rem;
}

El ejemplo anterior especifica un 4rem unidad de longitud para top y bottom cambios de límites y 4.5rem unidad de longitud para left y right cambios de límites.

El valor porcentual expresa las dimensiones de ancho y alto de la imagen del marco como un porcentaje:

.container {
  border-image-width: 20%;
}

funciona igual que border-image-slice el valor de la propiedad de porcentaje, donde los porcentajes son relativos al tamaño de la imagen. Por ejemplo, las dimensiones del GIF utilizado en la demostración a continuación son 498pxX280pxcuando nos ponemos border-image-width valor a 20%el ancho calculado que es 99.6px (498px * 20%) a lo largo de la parte superior e inferior y en la altura 56px (280px * 20%) a lo largo de los lados derecho e izquierdo del borde.

number [0,∞]

Cuando se utiliza un entero no negativo sin unidades como border-image-width valor, representa un múltiplo del elemento border-width Considera lo siguiente:

.container {
  border-image-width: 2;
  border-width: 2rem;
}

Aquí, border-image-width valor (2) se multiplica por border-width valor (2rem) para calcular el ancho utilizado (4rem) de la imagen límite.

Presta atención a esto también border-image-width dibuja su borde desde el cuadro delimitador del elemento, de acuerdo con el modelo de cuadro CSS.Y cuando dibuja el área, comienza desde el cuadro delimitador y trabaja hacia adentro.

Es muy diferente de cómo border-width funciona, lo que aumenta el cuadro delimitador del contenedor, lo que aumenta las dimensiones generales del elemento.

En otras palabras, border-image-width aumenta el ancho de la imagen sin afectar el tamaño total del elemento.

auto

Usando auto palabra clave se basa en el tamaño natural (no especificado) de la imagen proporcionada por border-image-source o del elemento border-width valor.

¿Cómo elige cuál usar? Si la imagen tiene un tamaño natural (o "intrínseco"), este es el valor. Por ejemplo, si la imagen es 200px cuadrado, entonces 200px es el valor aplicado Si no hay un tamaño nativo, digamos un SVG sin atributos de ancho o alto, entonces border-width en su lugar se utiliza el valor.

y que pasa si no hay border-width en el artículo? El estilo original de border-width es none resultando en un ancho de cero.

Por "tamaño natural" nos referimos a las dimensiones de todo el ancho y el alto de la imagen. Por ejemplo, si soltamos <img> por pagina y listo 500px cuadrado, este es el tamaño natural. Esto es diferente del tamaño de la imagen en su contexto. Por ejemplo, si configuramos la misma imagen con <img width="200"> el tamaño natural sigue siendo 500px cuadrado, aunque está representado en 200px en la pantalla.

Bordes superpuestos

Digamos que tenemos una imagen de marco de tamaño natural de 500px cuadrado:

.element {
  border-image-source: url("/image-500px.webp");
}

Ahora digamos que establecemos border-image-width a un valor que excede las dimensiones de la imagen:

.element {
  border-image-source: url("/image-500px.webp");
  border-image-width: 2; /* 400px = 200px * 2 */
  border-width: 200px;
}

Los límites se superpondrían en este tipo de situación ya que las compensaciones se combinan 800px en las dimensiones de ancho y alto. Sin embargo, la propiedad es "inteligente" en el sentido de que reduce la aplicación border-image-width valor en cada lado proporcionalmente hasta que los bordes ya no se superpongan. En este caso, el valor debe reducirse en 100px de desplazamiento para adaptarse a las dimensiones naturales de la imagen.

Él especial proporciona la fórmula que usa el navegador para resolver esto:

f = min(Lwidth/(Wleft + Wright), Lheight/(Wtop + Wbottom))

Donde:

Lwidth = width of the border image area (`border-width`)
Lheight = height of the border image area
Wleft = Left offset of the border image width
Wright = Right offset of the border image width
Wtop = Top offset of the border image width
Wbottom = Bottom offset of the border image width

Después de que calculemos fcomprobamos si f < 1 y si es así multiplicamos los valores de compensación (Wleft, Wright, Wtop, Wbottom ) de f vamos a reducirlo.

Sustituyendo nuestros valores del ejemplo anterior en nuestra ecuación, tenemos:

f = min(200px/(400px + 400px), 500px/(400px + 400px)) = 0.25

De f es menos que 1multiplicamos todas las compensaciones por 0.25 dando como resultado el nuevo valor de compensación, 100px.

demostración

Cambie los valores a continuación para border-image-width y border-width para ver cómo cada entrada afecta el tamaño de la imagen.

Compatibilidad con navegador

Más información

¡Trucos relacionados!

Conectado