Propriedade abreviada da fronteira do CSS

As propriedades abreviadas do CSS tendem a executar várias propriedades simultaneamente. A propriedade de abreviação da fronteira do CSS permite alterar completamente a largura, o estilo e a cor da fronteira. Este artigo fornece uma demonstração sobre o funcionamento da propriedade de abreviação de fronteira. Além disso, vários exemplos são ilustrados para obter a propriedade prática da borda abreviada.

Como funciona a propriedade de abreviação de fronteira

O CSS Border Breathandand Property Works com base na seguinte sintaxe:

Na sintaxe acima,

• o Seletor pode ser qualquer elemento, ou pode se referir à classe no CSS
• o largura refere -se à largura da fronteira e pode ser definido em px, em, %. O PX define o padrão e o EM mostra o resultado referente ao valor px. Por exemplo, se o corpo tiver um valor px igual a 4px, seria igual a 1em, da mesma forma, para 8px, seria 2em.
• o estilo representa o estilo da borda e pode ser pontilhado, tracejado, sólido, duplo, traço, ranhura, escondido, inserido, início, nenhum.
• o cor A propriedade adiciona cor às fronteiras e a cor pode ser fornecida usando o nome exato (vermelho, azul), usando o valor hexadecimal da cor, usando o esquema de padrão RGB/RGBA.

A discussão acima deve ter ajudado você a obter o conceito de propriedade de abreviação de fronteira do CSS.

Como usar a propriedade de abreviação de fronteira do CSS

O funcionamento fundamental da propriedade de abreviação de fronteira é fornecido na seção acima. Aqui, exercitaremos poucos exemplos que demonstram o uso da propriedade da fronteira CSS.

Exemplo 1

É praticado o código a seguir que aplica a propriedade de abreviação de Border CSS.

A descrição do código é fornecida abaixo:

• Duas classes CSS são criadas denominadas "uma" e "dois"
• A classe “única” usa a propriedade abreviada da borda com uma largura de 2px, o estilo é tracejado e a cor é escura
• A classe “duas” pratica a propriedade abreviada da borda com os seguintes valores: a largura é 2px, o estilo é pontilhado e a cor da borda é vermelha
• as outras propriedades da classe “uma” e “dois” se referem à div. usada no corpo.
• Duas tags div são usadas no corpo, a primeira tag div usa uma classe "One" de CSS e a segunda tag div usa uma classe "dois" de CSS.

A imagem do código é fornecida abaixo;

A saída do código acima é fornecida abaixo:

Exemplo 2

A propriedade abreviada da fronteira aceita três parâmetros e seu uso é fornecido no exemplo acima. Aqui, estamos considerando apenas o "estilo com cor" e "estilo com largura" da propriedade abreviada da borda usando o seguinte código.

Bem -vindo ao Linuxhint

Bem -vindo ao Linuxhint

A descrição do código é fornecida abaixo:

• Duas classes CSS são criadas denominadas "prim" e "sec"
• A classe “Prim” contém o estilo e a cor da propriedade abreviada da borda
• A classe "SEC" usa a largura e o estilo
• No corpo, são criados dois parágrafos que estão associados a cada classe CSS

A imagem do código é mostrada abaixo:

A saída do código acima é mostrada abaixo:

Com os exemplos ilustrados acima, você teria aprendido a funcionalidade da propriedade abreviada de borda em vários cenários.

Conclusão

A propriedade de abreviação de fronteira do CSS é composta por três propriedades de fronteira, largura de fronteira, estilo de fronteira e cor da borda. Este artigo fornece um guia detalhado sobre a propriedade de abreviação de fronteira CSS. O funcionamento da propriedade abrevante de fronteira é explicado brevemente onde você obteria uma compreensão básica dessa propriedade. Além disso, são afirmados vários exemplos que implementam propriedades de abreviação de fronteira do CSS em vários cenários.