Bordas de gradiente - CSS

Usar cores intuitivas no design da web pode ajudar a chamar a atenção do usuário. Diferentes métodos de cores podem ser utilizados em aplicativos da web. As cores do gradiente são significativas e atraentes porque combinam várias cores para produzir mais tons de cores. Não há propriedades CSS específicas para adicionar bordas de gradiente ao redor do elemento. No entanto, algumas outras propriedades nos ajudam neste contexto.

Este post descreverá como aplicar bordas de gradiente no CSS.

Como aplicar bordas de gradiente no CSS?

Listamos os métodos para aplicar as fronteiras de gradiente ao redor do elemento HTML:

• Método 1: Adicione a borda do gradiente em torno do elemento usando CSS “imagem de fronteira" Propriedade
• Método 2: Adicione a borda do gradiente em torno do elemento usando CSS “preenchimento" Propriedade

Antes de entrar nos métodos acima mencionados, vamos primeiro criar uma página HTML.

Pré -requisito

Siga as instruções para criar uma página HTML:

• Adicione um “”Elemento e atribui uma classe“principal”.
• Dentro deste elemento, adicione outro elemento "" para colocar uma imagem. Defina sua classe como “imagem”. Este elemento div contém o “"Tag com os atributos" SRC "," Alt "e" Width ".
• O "src”Atributo especifica o URL da imagem.
• O "alt”O atributo define um texto que será exibido na tela se a imagem não puder carregar.
• O "largura”Determina a largura da imagem.

Aqui está o código HTML:

Vamos aplicar alguns modelos de CSS na página HTML.

Estilo “” elemento

O elemento div tendo classe “principal”É estilizado com as seguintes propriedades CSS:

.principal
Largura: 350px;
Altura: 230px;
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
margem: automático;

A descrição do código acima mencionado está listado abaixo:

• ““largura”Ajusta a largura do elemento.
• ““altura”Determina a altura do elemento.
• ““mostrar”Propriedade define o comportamento de exibição do elemento. O valor que "flex”Torna o layout do elemento flexível.
• ““Justify-Content”Propriedade alinha os itens flexíveis horizontalmente.
• ““alinhado-itens”Alinham os itens flexíveis verticalmente.
• ““margem”Adiciona espaço ao redor do elemento.

Pode -se observar que a imagem é ajustada com sucesso na página da web:

Método 1: Adicione a borda do gradiente em torno do elemento usando a propriedade CSS “Border-Image”

Agora, no exemplo em andamento, o CSS “imagem de fronteira”A propriedade é utilizada para gerar gradientes. No CSS, adicione as seguintes propriedades à divisão com a classe “.principal”:

borda: 5px transparente sólido;
Imagem da fronteira: gradiente linear (40deg, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

Abaixo está a explicação das propriedades acima mencionadas:

• ““fronteira”É uma propriedade abreviada que aplica uma borda ao redor do elemento especificando a largura, o estilo e a cor da borda.
• ““imagem de fronteira”É atribuído o valor“Gradiente linear()”Função, que cria uma imagem com várias cores que progridem em uma direção específica. Esta função mantém alguns parâmetros. O primeiro valor representa o “ânguloPara o qual o gradiente inclinará, então o início e o fim do gradiente são especificados pelos dois “cor”Valores. No final, a opacidade é definida.

A imagem abaixo mostra que a borda do gradiente foi aplicada com sucesso em torno da imagem:

Método 2: Adicione a borda do gradiente em torno do elemento usando a propriedade "preenchimento" do CSS

Para adicionar o elemento gradiente, as duas propriedades CSS mais importantes estão listadas abaixo:

• O "principal”Div é estilizado com o“fundo”Propriedade com o valor atribuído como um“Gradiente linear()”Função.
• O contêiner div tendo um “imagem”A classe recebe a“preenchimento”Propriedade para produzir espaço em torno do“" elemento. Isso tornará mais fácil ver o fundo do gradiente do “principal”Classe de div como a borda da imagem.

Vamos implementar esses dois pontos.

Classe de estilo “Principal”

.principal
Largura: 380px;
Antecedentes: gradiente linear (à direita, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0.857));
margem: automático;
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;

O ".principal”É utilizado para acessar o elemento div ter classe“principal”. As seguintes propriedades são aplicadas a ele:

• ““fundo”A propriedade recebe uma função“ linear-gradiente () ”como um valor. Tem vários parâmetros. O primeiro valor representa a direção do gradiente. Os outros três parâmetros representam as cores do gradiente.

Estilo “imagem” div

.imagem
preenchimento: 10px;

O CSS “preenchimento”A propriedade é aplicada ao contêiner da Div com classe“imagem”. Esta propriedade produzirá espaço em torno de seu conteúdo. No nosso caso, incorporamos a imagem.

A borda do gradiente ao redor da imagem é mostrada na saída abaixo:

Aprendemos os métodos para aplicar bordas de gradiente em torno dos elementos usando CSS.

Conclusão

No CSS, o “imagem de fronteira”Propriedade com o valor atribuído como o“Gradiente linear()”A função é utilizada para adicionar bordas de gradiente ao redor do elemento. O CSS “preenchimento”A propriedade também pode ser útil para representar o fundo do gradiente como uma borda para o conteúdo. Neste post, demonstramos como aplicar bordas de gradiente em torno dos elementos usando CSS.