borde-imagen-fuente | Trucos CSS - Trucos CSS

los border-image-source La propiedad CSS crea bordes alrededor de los elementos utilizando un archivo de imagen o un degradado CSS como origen.

.container{
  border-width: 2rem;
  border-style: dotted;
  border-color: grey;
  border-image-source: url('path/to/image.jpg');
  border-image-repeat: repeat;
  border-image-slice: 100;
}

Note en este ejemplo que border-image-source es uno de los tres border-image-* Propiedades:

• border-image-source: especifica el archivo de imagen o el degradado utilizado para un marco.
• border-image-repeat: Especifica si repetir la imagen al dibujar el borde o mostrarla una vez.
• border-image-slice: divide la imagen del marco en áreas utilizadas para distribuir y dimensionar la imagen.

los border-image-source La propiedad se define en Nivel de especificación del módulo CSS Backgrounds and Borders 3

Sintaxis

border-image-source = none | <image>;  
where
  <image> = <url> | <gradient> 

…dónde <image> se puede expresar como una URL que apunta a una imagen o un archivo de degradado CSS.

• Valor inicial: none
• Se refiere a: Todos los elementos excepto los elementos de la tabla interna cuando border-collapse es un colapso
• Heredado: no
• Valor calculado: none o el calculado <image>
• Porcentajes: N / A
• Tipo de animación: discreto discreto

Valores

/* Keyword values */
border-image-source: none;
border-image-source: <image>;

/* <image> values */
border-image-source: url('image.png');
border-image-source: url('svg-file.svg');
border-image-source: <gradient>;

/* <gradient> values */
border-image-source: linear-gradient(to bottom left, lightblue, #00000);
border-image-source: repeating-linear-gradient(15deg, #900000, #ee2400, #ffb09c 2rem );
border-image-source: radial-gradient(to top right, #7AD7F0, #92DFF3 0.5rem, #F5FCFF);
border-image-source: repeating-radial-gradient(to right, #B7E9F7, #DBF3FA);
border-image-source: conic-gradient(#FFFEE9, #FFFBC8, #FFF59E, #FFF157);

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

none

Este es el valor predeterminado para border-image-source Propiedad CSS Indica que no habrá color de imagen o gradiente establecido en el elemento seleccionado.

los <gradient> La sintaxis le permite establecer un grupo de colores y superponerlos. Representa 5 funciones de gradiente que son:

• linear-gradient()
• radial-gradient()
• conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

<image> me gusta url()

<image> acepta url() función con sus entradas válidas, incluida una imagen con una extensión válida, svg o enlace de imagen externa. Es básicamente de la misma manera background-image acepta url() función y muestra el archivo de imagen al que apunta. El siguiente ejemplo crea un marco a partir de un archivo JPG con una imagen proporcionada en el url() función:

.container {
  border-image-source: url("path/to/image.jpg");
  border-image-repeat: repeat;
  border-image-slice: 150 75;
  /* etc */
}

<image> me gusta <gradient>

los <image> el valor también se puede expresar como CSS <gradient>Los degradados son solo imágenes dibujadas por el navegador, por lo que se consideran válidos <image> Se admite cualquier tipo de degradado CSS:

• linear-gradient()
• radial-gradient()
• conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

Lo configuramos de la misma manera que lo configuraríamos como si se hubiera configurado usando el background-image Propiedad:

.container{
  border-image-source: repeating-linear-gradient(
    15deg,
    #900000,
    #ee2400,
    #ffb09c 2rem
  );
  border-image-repeat: repeat;
  border-image-slice: 100 75;
  /* etc */
}

Oh, ¿quieres animar el degradado? ¡Por supuesto! Esto requiere el uso de CSS personalizado @property - que solo es compatible con Chrome en el momento de escribir este artículo - pero es perfectamente posible, por ejemplo, rotar el ángulo del degradado:

Más información sobre el uso @property en Interpolación de variables CSS numéricas.

Las imágenes de borde pueden ser SVG

Además de las imágenes con una extensión de imagen válida, svg Los archivos también se pueden usar como bordes. Vincule el archivo SVG como de costumbre en url() función:

.container {
  border-width: 3rem;
  border-style: solid;
  border-image-source: url("path/to/image.svg");
  /* etc. */
}

El SVG codificado también funciona si prefiere desplazarse de esta manera:

si quieres conseguir estupendo complejo con SVG como borde de imagen, lea Patrones de fondo creativos usando degradados, formas CSS e incluso emojis de Preethi. Los ejemplos allí utilizados background-image propiedad pero trabajan con border-image-source también.

El radio del borde está prohibido

La historia corta es que border-image-source la propiedad no funciona con border-radius propiedad Puede establecer border-radius en el mismo elemento, pero las esquinas de la imagen del borde conservarán sus bordes afilados.

Si realmente necesita esas esquinas redondeadas, entonces puede considerar usar un background-image del elemento ::before pseudo elemento e implementación border-radius en él en su lugar.

Aquí está la historia más larga. Durante mi investigación, el siguiente ejemplo utilizado border-image-source propiedad para crear un repeating-linear-gradient frontera con un border-radius sintonizado en 50%Observe cómo las esquinas permanecen nítidas a pesar de que DevTools muestra una border-radius declaración:

Así es como se ve sin border-image-source:

Se ha detectado un problema en el informe de especificaciones, pero no hay indicación de cuándo o si se resolverá en el momento de escribir este artículo.

productividad

Tenga cuidado al usar imágenes o direcciones URL externas a sus imágenes en border-image-source sin tomar medidas para reducir su tamaño antes de su uso, ya que cargar imágenes pesadas aumenta significativamente el tamaño total de la página, lo que resulta en un sitio web más lento. Siempre vale la pena optimizar sus imágenes antes de llamarlas con url() característica y una predilección por los formatos de imagen modernos que tienden a ser más ligeros.

Demostración

Compatibilidad con navegador

El soporte se ve bien en todos los principales navegadores. También es ideal para configurar su propio border-color en caso de que su imagen no se cargue o el recurso no se pueda cargar debido a problemas con el servidor:

section {
  border-color: grey; /* fallback color */
  border-width: 2rem;
  border-image-source: url("image.png");
}

Más información

¡Trucos relacionados!

Conectado