in

Imágenes de borde CSS

border

Imágenes de borde CSS

Con el CSS border-image propiedad, puede configurar una imagen para que se utilice como borde alrededor de un elemento.


Propiedad de imagen de borde CSS

El CSS border-image La propiedad le permite especificar una imagen que se utilizará en lugar del borde normal alrededor de un elemento.

La propiedad tiene tres partes:

  1. La imagen que se utilizará como borde
  2. Dónde cortar la imagen
  3. Defina si las secciones intermedias deben repetirse o estirarse

Usaremos la siguiente imagen (llamada «border.png»):

Frontera

los border-image propiedad toma la imagen y la corta en nueve secciones, como un tablero de tic-tac-toe. A continuación, coloca las esquinas en las esquinas y las secciones intermedias se repiten o se estiran según lo especifique.

Nota: Para border-image para funcionar, el elemento también necesita
border conjunto de propiedades!

Aquí, las secciones centrales de la imagen se repiten para crear el borde:

¡Una imagen como borde!

Aquí está el código:

Ejemplo

#borderimg {
borde: 10px transparente sólido;
relleno: 15px;
imagen de borde: url (borde.png) 30 ronda;
}

Inténtalo tú mismo »

Aquí, las secciones centrales de la imagen se estiran para crear el borde:

¡Una imagen como borde!

Aquí está el código:

Ejemplo

#borderimg {
borde: 10px transparente sólido;

relleno: 15px;
imagen de borde: url (borde.png) 30 estiramiento;
}

Inténtalo tú mismo »

Propina: los border-image propiedad es en realidad una propiedad taquigráfica de la
border-image-source, border-image-slice, border-image-width,
border-image-outset
y border-image-repeat propiedades.



Imagen de borde CSS: diferentes valores de corte

Diferentes valores de corte cambian completamente el aspecto del borde:

Ejemplo 1:

imagen de borde: url (borde.png) 50 ronda;

Ejemplo 2:

border-image: url (border.png) 20% redondo;

Ejemplo 3:

border-image: url (border.png) 30% redondo;

Aquí está el código:

Ejemplo

# borderimg1 {
borde: 10px transparente sólido;

relleno: 15px;
imagen de borde: url (borde.png) 50 ronda;
}

# borderimg2 {

borde: 10px transparente sólido;
relleno: 15px;

border-image: url (border.png) 20% redondo;
}

# borderimg3 {
borde: 10px transparente sólido;

relleno: 15px;
border-image: url (border.png) 30% redondo;
}

Inténtalo tú mismo »


¡Ponte a prueba con ejercicios!


Propiedades de imagen de borde CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Captura de un programa de captura

Cómo descargar, instalar y usar LightShot en español

aws

Tutorial de AWS | Tutorial de servicios web de Amazon