borde-imagen-repetir | Trucos CSS - Trucos CSS

CSS border-image-repeat La propiedad controla cómo se repite la imagen del marco para rellenar los bordes exteriores de un elemento. También puede controlar el centro del fondo de un elemento cuando border-image-slice se establece en fill.

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

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

Sintaxis

border-image-repeat: stretch | repeat | round | space

• Valor inicial: stretch
• 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: dos palabras clave, una por eje
• Tipo de animación: apartado

Valores

/* Keyword values */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* Multiple value syntax */
border-image-repeat: stretch repeat;
border-image-repeat: stretch round;
border-image-repeat: stretch space;

border-image-repeat: round stretch;
border-image-repeat: round repeat;
border-image-repeat: round space;

border-image-repeat: repeat stretch;
border-image-repeat: repeat round;
border-image-repeat: repeat space;

border-image-repeat: space stretch;
border-image-repeat: space round;
border-image-repeat: space repeat;

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

stretch

Este es el valor predeterminado. Estira la imagen para llenar el área del borde.

repeat

Este valor repite la imagen del marco en mosaicos para llenar el área del borde. Si la pila llega a un punto en el que ya no hay espacio para un mosaico completo, ese mosaico se puede recortar para llenar correctamente el espacio restante y evitar espacios.

round

me gusta repeateste valor repite y estira la imagen para llenar todos los lados del borde. Pero a diferencia repeaten round El valor cambiará la escala de la imagen para evitar espacios en lugar de recortar mosaicos.

space

Como otros valores, space repite la imagen del borde en mosaicos para llenar el área del borde. Si queda espacio, space lo distribuirá alrededor de los mosaicos para llenar toda el área en lugar de recortar y estirar los mosaicos o cambiar la escala de la imagen.

algunos antecedentes

Podemos configurar una imagen para que se use como borde de un elemento:

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

Esto no hará nada porque en realidad no hemos establecido el ancho y el estilo del marco, así que hagamos esto:

.element {
  border: 2.5rem solid; /* shorthand for `border-width` and `border-style` */
  border-image-source: url("/path/to/image.webp");
}

no necesitamos preguntar border-color pero podría ser una buena idea como alternativa en caso de que el archivo de la imagen del borde no se cargue por algún motivo.

Esto dibuja nuestro borde usando el archivo de imagen que le proporcionamos (aquí está el archivo usamos en los ejemplos):

Generamos imágenes para todas las direcciones de la frontera. El problema es que no hemos proporcionado ninguna instrucción sobre qué hacer con esta imagen para llenar el espacio disponible. Pero primero podemos "cortar" la imagen con border-image-slice。 Esto se divide en nueve partes: las cuatro esquinas, los cuatro lados y el centro.

Después de cortar la imagen del marco, los mosaicos se colocan y border-image-repeat: stretch (el valor predeterminado) tarda en estirar toda la imagen para llenar todo el espacio disponible que dibujamos para el marco.

Ahora podemos declarar explícitamente border-image-repeat y configúrelo en cualquiera de los valores que cubrimos.

Dibujar imágenes de límite con dos valores repetidos

Asi que, border-image-repeat puede tomar hasta dos valores. Cuando se trabaja con la sintaxis de dos valores, la primera palabra clave establece la escala y el orden en Dirección horizontal (los bordes superior e inferior del borde). También puede configurar el área central cuando border-image-slice se establece en fill.

La segunda palabra clave en la sintaxis de dos valores establece la escala y el orden en dirección vertical (los bordes izquierdo y derecho), así como la imagen central cuando border-image-slice se establece en fill.

La especificación oficial hace un trabajo notable. esbozar el proceso en curso al repetir una imagen de cuadro con la sintaxis de dos valores. Lo insertaremos aquí textualmente:

• Si la primera palabra clave es stretch, Las imágenes superior, central e inferior se escalan aún más para que sean tan anchas como la parte central del borde de la imagen. La altura ya no cambia.
• Si la primera palabra clave es round, las imágenes superior, central e inferior se redimensionan en ancho para que exactamente un número entero de ellas quepa en el medio de border-image área, al igual que para round en background-repeat Propiedad.
• Si la primera palabra clave es repeat o space, Las imágenes superior, media e inferior ya no cambian.

Compatibilidad con navegador

Más información

Conectado