CSS Inserção de bordas

HTML é a linguagem de programação que fornece a estrutura para páginas da web, enquanto o CSS nos permite personalizar os elementos. Várias propriedades CSS são especificadas para implementar diferentes tipos em uma página da web, incluindo cor de fundo, tamanho da fonte, borda, raio de borda e sombra de caixa. Mais especificamente, "estilo de borda" e "Sombra da caixa”As propriedades são utilizadas para definir efeitos dentro ou fora da fronteira.

Este post explicará os métodos para as fronteiras inseridas no CSS.

O que são bordas CSS inseridas?

CSS Inserir valor da borda é amplamente utilizado com o “estilo de borda”Propriedade para aplicar o efeito de borda 3D nos elementos HTML, e geralmente depende do valor da cor da fronteira.

Existem diferentes métodos para as bordas inseridas no CSS estão listadas abaixo:

• Método 1: Adicione a borda inserida com “estilo de borda" propriedade
• Método 2: Adicione a borda inserida com “Sombra da caixa" propriedade

Método 1: Adicione a borda inserida com a propriedade "no estilo de fronteira"

Para inserir fronteira com “estilo de bordaPropriedade, siga o procedimento fornecido:

• Primeiro de tudo, crie um título com o “

  " marcação.

• Então, adicione o “estilo”Atribua para estilizar o cabeçalho de acordo com suas preferências. Por exemplo, o cabeçalho é denominado como “Alinhamento de texto: centro”.
• Depois disso, adicione texto para o título entre o “

  " Tag.

• Crie um recipiente de div e insira um “eu ia”Atributo:

Borda inserida

Aplique a borda CSS inserida usando a propriedade "no estilo de fronteira"

Aqui, aplique as propriedades CSS no contêiner Div criado:

#border-div
Antecedentes: URL transparente (emoji.png) 50% sem repetição;
Min-altura: 300px;
largura de min: 200px;
Margem: 0px 200px;
estilo de fronteira: inserção;

Os detalhes sobre as propriedades acima mencionadas são discutidas abaixo:

• O "fundo”A propriedade é utilizada para definir todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho, ou o método de repetição.
• ““altura da minia”Propriedade especifica a altura mais baixa para um elemento.
• ““largura min”O recurso define a menor largura para um elemento.
• ““margem”Propriedade especifica o espaço para um elemento ao redor da borda definida.
• ““estilo de borda”A propriedade é usada para modelar a fronteira para exibir ao redor do elemento.
• ““inserir”O valor é utilizado para fazer sombras dentro da caixa.

Saída

Vamos passar em direção a outro método para adicionar uma borda inserida.

Método 2: Adicione a borda inserida com a propriedade “Shadow Box”

Para aplicar a borda inserida com o “Sombra da caixaPropriedade, crie o contêiner Div seguindo o mesmo cenário:

Borda inserida

Aplique a borda inserida usando a propriedade “Shadow Box”

#border-div
Antecedentes: URL transparente (emoji.png) 50% sem repetição;
largura de min: 200px;
Min-altura: 300px;
Margem: 0px 200px;
Shadow de caixa: inserção 0 0 10px RGB (228, 164, 27);

Acesse o contêiner Div usando o “#border-div”ID atributo e aplique as mesmas propriedades CSS, incluindo“fundo","largura min","altura da minia","margem", e "Sombra da caixa”. Mais especificamente:

• O "Sombra da caixa”Propriedade insere uma sombra fora de um elemento.
• ““inserir”O valor é definido como a sombra dentro da caixa com uma cor específica“RGB (228, 164, 27)”.

Saída

Como alternativa, os usuários podem adicionar vários valores de sombra para construir a densidade de fronteira. Para esse fim, siga o código fornecido:

Box-Shadow: Insert 0 0 20px RGB (89, 0, 255), inserção 0 0 20px RGB (0, 183, 255), inserção 0 0 20px RGB (0, 183, 255);

Saída

Afirmamos o método para aplicar a borda inserida no CSS.

Conclusão

As bordas CSS inseridas são bordas 3D que são definidas nos elementos HTML. Para definir a borda inserida, o CSS “estilo de borda" e "Sombra da caixaAs propriedades podem ser utilizadas. O "Inserir”O valor das propriedades especificadas é definido para fazer sombras e múltiplos efeitos dentro da borda. Este post demonstrou os métodos para aplicar bordas inseridas no CSS.