Cómo usar la propiedad de imagen fronteriza CSS
Esta guía mostrará cómo usar la propiedad de imagen fronteriza CSS.
Cómo usar la propiedad de imagen fronteriza CSS?
La propiedad de la imagen del borde se usa para establecer la imagen como un borde alrededor de un elemento.
Sintaxis
La sintaxis de la propiedad de imagen fronteriza es:
Imagen de borde: repetición de corte / ancho de anchoLa imagen fronteriza es una propiedad abreviada de CSS que tiene cinco propiedades diferentes, como:
- fuente de imagen fronteriza: Se usa para especificar la fuente de la imagen.
- bordes-slice: Se usa para cortar la imagen del borde.
- ancho de imagen fronteriza: Se utiliza para establecer el ancho del borde.
- Outpage-Image: Se utiliza para establecer la cantidad de espacio que la imagen del borde toma del marco del borde.
- Repeat de imagen fronteriza: Se utiliza para evitar la repetición de la imagen fronteriza y llenar el área de la frontera.
Nota: Si solo especificamos la fuente de imagen en lugar de todos los valores, el borde de la imagen se establece de acuerdo con los valores predeterminados de estas propiedades.
Para comprender perfectamente, pase al ejemplo práctico de la propiedad de imagen fronteriza.
Ejemplo: establecer una imagen como borde con propiedad de imagen fronteriza
Para crear un borde de imagen alrededor de un elemento, primero, agregue un elemento en un archivo HTML. Para hacerlo, crearemos un y asignaremos un "borde"Clase para ello. Después de eso, agregaremos un encabezado y un párrafo usando
y
etiquetas.
Html
Linuxhint
Borde de la imagen
Ahora, muévase a CSS y aplique la propiedad de imagen fronteriza al contenedor creado.
Aquí, hemos usado ".borde"Para acceder al DIV creado en el HTML. A continuación, aplicaremos el "borde"Propiedad y establece los valores del borde como"30px" y "sólido", Respectivamente. En el siguiente paso, usaremos el "imagen fronteriza"Propiedad y establecer los valores de fuente, corte, ancho, comienzo y repetir como"imagen.JPG","50","30px","40px", y "redondo". Además, asignaremos el valor de la propiedad de alineación de texto como "centro", Propiedad del tamaño de una fuente como"50px", Y propiedad de color como"RGB (3, 59, 7)"Para diseñar el encabezado y el párrafo.
CSS
.bordeborde: 30px sólido;
Imagen fronteriza: URL ('Imagen.jpg ') 50/30px 40px Round;
Text-Align: Center;
tamaño de fuente: 50px;
Color: RGB (3, 59, 7);
Una vez que haya implementado el código mencionado anteriormente, vaya al archivo HTML y ejecútelo. Como resultado, verá la siguiente salida:
La imagen dada anterior indica que la propiedad de la imagen fronteriza se implementa correctamente.
Ejemplo 2: Configuración de una imagen como borde con valores predeterminados de la propiedad de imagen fronteriza
En este ejemplo, solo especificaremos la fuente de la imagen y veremos su efecto en la propiedad de la imagen de imagen.
Aquí, solo asignaremos la fuente de imagen como "imagen.JPG"A la propiedad de la imagen fronteriza. Las propiedades restantes serán las mismas, según el ejemplo anterior.
CSS
.bordeborde: 30px sólido;
Imagen fronteriza: URL ('Imagen.jpg ');
Text-Align: Center;
tamaño de fuente: 50px;
Color: RGB (3, 59, 7);
Producción
Aquí, podemos ver que el borde de la imagen se coloca solo en las esquinas del div. Es porque el "imagen fronterizaLa propiedad utiliza valores predefinidos para todos los parámetros restantes.
Conclusión
El "imagen fronterizaLa propiedad se usa para establecer la imagen como un borde alrededor de cualquier elemento HTML. Puede establecer diferentes valores de la propiedad de imagen fronteriza para diseñar el borde. Si no especifica ningún valor de sus parámetros, la propiedad de Border de imágenes aplicará su comportamiento predeterminado. En este artículo, hemos explicado cómo agregar una imagen como un borde utilizando la propiedad de imagen fronteriza.