CSS Borda embutida

As fronteiras em linha e esboço são as duas propriedades básicas de estilo qualquer conteúdo criado em um corpo HTML - um pedaço de texto, forma ou imagem. Uma linguagem de marcação de hipertexto é a combinação de código usado para criar um conteúdo em uma página da web. Este conteúdo é denominado e alinhado através de tags adicionais usando a folha de estilo em cascata.

Uma borda embutida é uma propriedade adicionada ao conteúdo HTML para destacar essa porção específica, dando uma cor ou qualquer propriedade sólida ou pontilhada à borda. Este tutorial contém alguns exemplos de criação e criação de uma borda embutida CSS.

Exemplo # 1: estilo embutido em linha de borda

Primeiro, explicamos a seção de estilo CSS dentro da etiqueta da cabeça. O estilo interno contém os IDs e as classes para aplicar o estilo ao conteúdo relevante que é desenvolvido dentro do corpo HTML. Usamos a aula de estilo "H1" para o título 1 e aplicamos uma cor roxa a ela. O estilo aninhado é para a div. Isso é aplicado pela largura e pelo recipiente em pixels. É uma caixa de recipiente que é usada para armazenar os diferentes conteúdos dentro dela. Então, escrevemos um texto simples dentro da classe div.

Uma borda é aplicada a qualquer característica do HTML. Neste exemplo, aplicamos uma borda à classe div em torno do texto que usamos. Então, a declaração de estilo para a fronteira é aplicada na classe DIV. “Um” é criado que é mencionado dentro da tag div para que todos os efeitos da fronteira sejam aplicados ao contêiner Div.

Existem três estilos básicos de conteúdo que são aplicados à div. Um é o tipo de borda, que é sólido ou pontilhado. Selecionamos a borda sólida com uma cor preta com uma largura de 5 pixels.

A próxima propriedade é de propriedade da fronteira. Esta propriedade de estilo é escolhida como tracejada. Isso significa que as linhas verticais da borda são tracejadas, enquanto as linhas horizontais são simples sólidas. Se não mencionarmos nenhuma propriedade de estilo das fronteiras, por padrão, ela é selecionada como uma borda sólida. A cor do fundo no div é definida como rosa. Isso é feito para discriminar a parte da div do fundo de toda a página da web.

Código de estilo HTML:

Levando para a parte do corpo HTML, projetamos cada conteúdo do HTML no centro da página da web. Primeiro, a tag de estilo é usada. A cor BG que significa a cor de fundo da página é definida dentro da etiqueta corporal. Um título é declarado. Depois de aplicar um pequeno intervalo, para escapar de uma única linha no HTML, a tag Div é declarada com a classe de Declaração CDD.

Código corporal HTML:

Esta declaração de classe é responsável por aplicar todos os efeitos de estilo relacionados à fronteira. Agora, feche todas as tags e salve o arquivo de texto. Execute este arquivo no navegador para ver o resultado deste código.

Saída:

Você verá que a cor BG é aplicada junto com os títulos. Uma div é projetada com a borda com natureza sólida, com o estilo de border em linha como tracejada. Portanto, usando um valor de propriedade em linha tracejada, podemos obter uma saída como esta.

Exemplo #2: estilo sólido de fronteira com o modo de escrita horizontal

Dentro da parte do corpo do HTML, o código HTML é quase o mesmo que usamos no exemplo anterior. Um código é escrito dentro da etiqueta central, com uma div declarada. Dentro da div, uma etiqueta de parágrafo é usada com um texto simples, com uma classe como uma declaração de estilo. Um nome de classe "Exemplo de texto" é responsável por todos os efeitos. E as mudanças aplicadas ao parágrafo

são o caso de fronteira. Feche todas as tags e vá para a parte da cabeça para projetar o conteúdo dentro da div com uma borda.

Código corporal HTML:

Vá para a etiqueta de estilo dentro da seção da cabeça. Adicionamos o CSS primeiro ao contêiner div. A cor do fundo é aplicada à div com a altura e largura para criar uma caixa em segundo plano.

Código de estilo HTML:

Ao adicionarmos um exemplo de classe de texto ao parágrafo dentro da div, agora aplicamos o estilo de fronteira ao texto. Nesta classe, usamos um estilo do modo de escrita no parágrafo. Por exemplo, usamos um modo de escrita vertical. O texto aparece começando de cima para baixo, em vez do estilo horizontal padrão que é da esquerda para a direita.

Além disso, a fronteira é denominada como uma cor roxa sólida. A propriedade em estilo em linha da fronteira é definida como sólida. Portanto, a borda é uma forma de retângulo sólida ao redor do texto em uma direção vertical. Agora, executamos o código no navegador.

Saída:

Você verá que uma exibição vertical do texto é criada. Este texto tem uma borda ao redor que possui uma especialidade de espessura sólida de 5 pixels e estilo de borda em linha sólida.

Considerando o mesmo exemplo anterior, aplicamos alguns efeitos diferentes ao código. A aplicação do modo de escrita da maneira oposta usando o estilo de borda e as mudanças no estilo embutido pode causar um efeito diferente no texto que estamos usando para destacar o HTML.

Código de estilo:

No caso de div, a largura e a altura são aumentadas para formar uma grande caixa retangular. Da mesma forma, também alteramos os valores dentro do “.Classe do ExampleText ”para aplicar os efeitos na fronteira.

Usamos o modo de escrita do texto, pois é a propriedade de texto, em uma direção horizontal. Isso significa que o texto é como a linha padrão, começando da direção esquerda para a direita. A borda é definida como pontilhada com 5 pixels na largura e magenta. Considerando que o estilo embutido da fronteira é tomado como a mesma propriedade sólida. Todos os outros efeitos, como a cor de fundo, são iguais e todo o código dentro dos também são iguais.

Saída:

Quando você executa o arquivo no navegador, você verá que uma linha de texto horizontal é criada junto com uma borda com uma linha pontilhada. Dessa forma, podemos criar as fronteiras que variam em forma e estilo.

Conclusão

O estilo de fronteira embutido desempenha um papel essencial no estilo da fronteira do texto e da imagem, ou qualquer tipo de forma. Tentamos neste tutorial para fornecer os melhores exemplos das fronteiras CSS em linha usando o código HTML e o estilo CSS dentro do arquivo. No início, demos uma visão geral da linguagem de front-end HTML e CSS. Na seção de implementação, primeiro implementamos a fronteira em torno do texto com propriedades embutidas de borda especificadas. A fronteira depende do estilo de escrita; ele se molda de acordo com o estilo de texto. Por exemplo, para o estilo de escrita vertical do texto, a borda está na direção vertical.