Raio de esboço do CSS

Na maioria das vezes, tendemos a misturar a propriedade de esboço da HTML com sua propriedade de fronteira. Enquanto as duas propriedades são bastante diversas uma da outra. A propriedade da fronteira pode ocupar espaço extra. O esboço de qualquer elemento não pode ocupar espaço e pode se sobrepor a outros elementos também. Não podemos definir os lados de um esboço para um elemento específico. No entanto, podemos definir todos os 4 lados de uma borda separadamente. Além disso, você não pode alterar o tamanho ou a posição do elemento com a ajuda de um esboço ao seu redor. O contorno está sempre no lado externo do elemento e a borda é usada para ser o lado interno do elemento. Estaremos representando o uso do esboço nos códigos HTML, além de verificar seu raio.

Exemplo # 01:

Vamos começar com o uso de fronteiras em nosso exemplo. Depois disso, estaremos tomando um disfarce na propriedade. Usando a sintaxe básica da criação de um arquivo HTML, usamos as tags HTML, Head, Style e Body neste programa do Código do Visual Studio. Dentro da etiqueta corporal, usamos dois títulos com o uso de tags de cabeçote de tamanho H1 e H2. O H1 é o maior título disponível e pode ser reduzido para H6- que é o menor tamanho disponível. O H1 contém um simples "exemplo de fronteira". Enquanto o H2 contém uma frase longa. Dentro da etiqueta de estilo da etiqueta "Head", estamos estilizando o cabeçalho "H2" adicionando uma borda de cor azul de 3 pixels. Vamos salvar este código e executá -lo no navegador do Google Chrome.

Depois de executar este código HTML do código do Visual Studio em qualquer navegador, temos resultados mostrados abaixo. O primeiro título foi tomado como um título simples sem nenhum estilo. Enquanto o segundo título foi exibido com a borda sólida de cor azul de 3 pixels ao redor.

Vamos adicionar uma borda e esboço, ambos ao mesmo tempo em qualquer cabeçalho para ver a diferença. Estamos usando o estilo para o cabeçalho H2, como mostrado. Temos adicionado uma linha extra no estilo de H1 para criação de esboços. Este esboço será em cor verde e formato pontilhado. Cada um de seus pontos será de 5 pixels, conforme especificado. A borda já está definida como 2 pixels azuis sólidos. Vamos salvar e depurar este código HTML do Visual Studio e executá -lo no navegador.

A saída do código HTML acima está exibindo a página de abastecimento mostrado. A cor azul ao redor do título "H2" está mostrando a borda sólida, enquanto a linha pontilhada verde de tamanho 5 pixels ilustra o contorno do cabeçalho 2. Agora, você pode ver a diferença.

Exemplo # 02:

O contorno também pode ser sólido, assim como a fronteira. Vamos dar um disfarce em mais um exemplo para criar um novo esboço sólido. Então, estamos usando o mesmo arquivo com uma pequena diferença do código acima. Neste arquivo HTML, usamos o mesmo cabeçalho H1 do tamanho 1 e uma tag "Div" foi usada para criar uma nova seção na mesma página HTML. Você pode adicionar mais de 1 elemento na seção "Div". No momento, estamos adicionando a linha de texto simples para delinear a tag "div" ". Dentro da etiqueta de estilo deste arquivo html, usamos o título da tag "Div" para estilizá -lo. Estamos usando a propriedade de esboço para delinear 3 pixels. Este esboço será sólido, sem traços ou pontos. Sua cor será 'amarelo-verde', conforme especificado na área de estilo. O valor "3px" foi usado para especificar o comprimento de um esboço- quão grosso ou fino. Vamos salvar este código e executá -lo no navegador para ver os resultados.

O contorno de cor-verde-amarelo de tamanho 3 pixels foi gerado em torno do lado externo do elemento "div". Parece muito parecido com as fronteiras, embora sua direção seja sempre externa.

Em todos os exemplos acima, cobrimos a criação de uma borda sólida, contorno sólido e contorno pontilhado no arquivo html. Agora, estaremos criando um contorno tracejado em torno do elemento html. Temos tentado usar o mesmo script HTML até agora no código do Visual Studio. Uma única mudança que fizemos na tag de estilo é o uso da palavra -chave "tracejada" em vez de "sólido" para projetar o contorno de 3 pixels. Além disso, mudamos a cor do contorno para "azul-violeta". Vamos salvar este script atualizado HTML e executá -lo.

Após a depuração bem -sucedida deste código HTML dentro do código do Visual Studio, ele foi executado dentro do navegador Chrome e temos a saída mostrada abaixo. O contorno tracejado de violeta azul foi gerado em torno da seção "Div" desta página estática HTML.

Exemplo # 03:

Vamos dar uma olhada no raio de um esboço no script html. Como já discutimos no parágrafo introdutório, não podemos especificar os valores para cada lado do contorno separadamente, como podemos fazer pelas fronteiras. Portanto, dentro do mesmo arquivo HTML, atualizamos o corpo e a tag de estilo, conforme necessário. Temos usado um total de 1 tag "H1", 4 tags "div" e 3 tags de parágrafo "P".

O cabeçalho será do maior tamanho ("Exemplo de esboço"), enquanto todas as 4 tags "div" contêm 4 classes especificadas "A", "B", "C" e "D" para a criação de 4 seções dentro do Mesma página HTML. Os parágrafos foram deixados vazios apenas por uma questão de estilo. Isso é para a etiqueta "corpo". Usando as classes específicas de cada tag "div", especificamos a propriedade "esboço" dentro dela. Ele estará criando um esboço tracejado de violeta azul para a 1ª e 3ª seção "div" e um esboço "pontilhado"-violeta para a 2ª e 4ª tag "div". Todos esses contornos terão a mesma largura, "4px". Temos utilizado a propriedade "-moz-to-line-radius" de contornos para definir valores para cada lado do contorno separadamente. Estamos definindo raio do lado esquerdo para a div 1, lado esquerdo/direito para div 2, esquerdo/lado direito/lado superior para div 3 e todos os 4 lados para div 4. A largura, margem e estofamento para todas as 4 seções “div” têm sido iguais. Vamos testar o resultado deste código agora.

Após a execução deste código HTML, obtivemos os mesmos contornos de 4 pixels para todas as seções. O uso da propriedade RADIUS não afeta a saída enquanto a largura foi atualizada usando a "largura" da seção "Div".

Conclusão:

O parágrafo introdutório foi usado para demonstrar a clara diferença entre a propriedade da fronteira e a propriedade de esboço do estilo CSS em HTML. Dentro dos exemplos que usamos nesta implementação do artigo, discutimos a criação de diferentes tipos de contornos em comparação com as fronteiras, juntamente com suas diferenças. Além disso, discutimos o exemplo para mostrar que o raio de um esboço não pode ser alterado e depende totalmente da borda do elemento para destacá -lo e pode se sobrepor também.