Bordes de gradiente - CSS

El uso de colores intuitivos en el diseño web puede ayudar a atraer la atención del usuario. Se pueden utilizar diferentes métodos de color en aplicaciones web. Los colores de gradiente son significativos y atractivos porque combinan varios colores para producir más tonos de color. No hay propiedades CSS particulares para agregar bordes de gradiente alrededor del elemento. Sin embargo, algunas otras propiedades nos ayudan en este contexto.

Esta publicación describirá cómo aplicar los bordes de gradiente en CSS.

Cómo aplicar bordes de gradiente en CSS?

Hemos enumerado los métodos para aplicar los bordes de gradiente alrededor del elemento HTML:

• Método 1: Agregue el borde de gradiente alrededor del elemento usando CSS "imagen fronteriza" Propiedad
• Método 2: Agregue el borde de gradiente alrededor del elemento usando CSS "relleno" Propiedad

Antes de saltar a los métodos indicados anteriormente, primero creemos una página HTML.

Requisito previo

Siga las instrucciones para crear una página HTML:

• Agrega un ""Elemento y asignarlo una clase"principal".
• Dentro de este elemento, agregue otro elemento "" para colocar una imagen. Establecer su clase como "imagen". Este elemento div contiene el ""Etiqueta con los atributos" SRC "," Alt "y" Ancho ".
• El "SRC"El atributo especifica la URL de la imagen.
• El "alternativo"El atributo define un texto que se mostrará en la pantalla si la imagen no puede cargarse.
• El "ancho"Determina el ancho de la imagen.

Aquí está el código HTML:

Aplicemos algunos estilo CSS en la página HTML.

Estilo "" Elemento

El elemento div tiene clase "principal"Está diseñado con las siguientes propiedades de CSS:

.principal
Ancho: 350px;
Altura: 230px;
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
margen: auto;

La descripción del código mencionado anteriormente se enumera a continuación:

• "ancho"Ajusta el ancho del elemento.
• "altura"Determina la altura del elemento.
• "mostrar"La propiedad define el comportamiento de visualización del elemento. El valor "doblar"Hace que el diseño del elemento sea flexible.
• "Justify-ContentLa propiedad alinea los elementos flexibles horizontalmente.
• "ítems alineados"Alinea los artículos flexibles verticalmente.
• "margen"Agrega espacio alrededor del elemento.

Se puede observar que la imagen se ajusta correctamente a la página web:

Método 1: Agregue el borde de gradiente alrededor del elemento utilizando la propiedad CSS "Border-Image"

Ahora, en el ejemplo en curso, el CSS "imagen fronterizaLa propiedad se utiliza para generar gradientes. En CSS, agregue las siguientes propiedades al DIV que tiene clase ".principal":

borde: 5px sólido transparente;
IMAGEN BORDEM: gradiente lineal (40deg, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

A continuación se muestra la explicación de las propiedades mencionadas anteriormente:

• "borde"Es una propiedad en taquigrafía que aplica un borde alrededor del elemento especificando el ancho, el estilo y el color del borde.
• "imagen fronteriza"Se le asigna el valor"gradiente lineal()"Función, que crea una imagen con múltiples colores que progresan en una dirección particular. Esta función contiene algunos parámetros. El primer valor representa el "ángulo"A lo que el gradiente se inclinará, entonces el inicio y el final del gradiente son especificados por los dos"color" valores. Al final, la opacidad se define.

La siguiente imagen muestra que el borde de gradiente se ha aplicado con éxito alrededor de la imagen:

Método 2: Agregue el borde de gradiente alrededor del elemento utilizando la propiedad de "relleno" de CSS

Para agregar el elemento de gradiente, las dos propiedades CSS que son más importantes se enumeran a continuación:

• El "principal"Div está diseñado con el"fondo"Propiedad con el valor asignado como un"gradiente lineal()" función.
• El contenedor div que tiene un "imagen"Se asigna la clase"relleno"Propiedad para producir espacio alrededor del"" elemento. Esto hará que sea más fácil ver el fondo de gradiente del "principal"Clase de Div como la frontera de la imagen.

Implementemos estos dos puntos.

Clase de estilo "principal" de estilo

.principal
Ancho: 380px;
Antecedentes: gradiente lineal (a la derecha, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0.857));
margen: auto;
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;

El ".principal"Se utiliza para acceder al elemento div que tiene clase"principal". Se aplican las siguientes propiedades:

• "fondoA la propiedad se le asigna una función "gradiente lineal ()" como un valor. Tiene varios parámetros. El primer valor representa la dirección de gradiente. Los otros tres parámetros representan los colores de gradiente.

Estilo "Imagen" Div

.imagen
relleno: 10px;

El CSS "relleno"La propiedad se aplica al contenedor Div que tiene clase"imagen". Esta propiedad producirá espacio alrededor de su contenido. En nuestro caso, hemos incrustado la imagen.

El borde de gradiente alrededor de la imagen se muestra en la salida a continuación:

Hemos aprendido los métodos para aplicar bordes de gradiente alrededor de los elementos utilizando CSS.

Conclusión

En CSS, el "imagen fronteriza"Propiedad con el valor asignado como"gradiente lineal()La función se utiliza para agregar bordes de gradiente alrededor del elemento. El CSS "relleno"La propiedad también puede ser útil para representar el fondo de gradiente como borde del contenido. En esta publicación, hemos demostrado cómo aplicar bordes de gradiente alrededor de los elementos usando CSS.