Raio de fronteira de contorno CSS

Você pode ter ouvido e usado a propriedade de fronteira no estilo CSS enquanto preparava os arquivos HTML para criar uma borda destacada em torno de alguns elementos em torno de títulos, mesas e parágrafos. Quando você adiciona uma borda a qualquer elemento, você pode estilizá -lo de maneiras diferentes: criar uma borda sólida, pontilhada e tracejada, ou delineá -la também. A propriedade de Rádio de Fronteira permite estilizar os cantos de uma fronteira. Dentro deste guia, discutiremos diferentes exemplos para estilizar os cantos da fronteira usando o contorno e a propriedade de Radius de fronteira.

Exemplo 01:

Vamos começar com o exemplo mais básico de bordas. Neste exemplo, demonstraremos o uso da propriedade de fronteira para criar uma borda simples em torno de um elemento usado no código HTML. O código HTML foi iniciado com a tag Doctype "HTML" que será fechada no final do programa HTML. Após a tag html, usamos a tag "Head" e a tag corporal. A tag "Head" estará utilizando a tag de estilo para projetar nossa página da web.

Dentro da etiqueta corporal, usamos o título "H1", que será do maior tamanho em títulos html. Este cabeçalho contém apenas duas palavras, "raio de borda". Dentro da etiqueta de estilo, estamos utilizando o H1 indo para estilizá -lo um pouco. Dentro dos colchetes encaracolados, usamos a propriedade "fronteira" para criar uma borda ao redor do título. Especificamos a largura da borda como 3 pixels sólidos e será vermelho. O estilo e a etiqueta de cabeça estão fechados aqui. Vamos salvar e executar este script HTML no código do Visual Studio e fazê -lo aberto no Google Chrome.

Após a execução do código HTML no código do Visual Studio, a página da web html foi aberta no navegador Chrome, como mostrado abaixo. Esta página foi exibida com o título 1 "Status da fronteira" com sua borda vermelha. Esta borda é de largura 3 pixels e é vermelho sólido.

Até ainda, não discutimos o raio da fronteira em nossa ilustração acima do código HTML. Então, estamos usando um total de 4 títulos com títulos diferentes. Como todos os títulos são títulos de tamanho 1, precisamos diferenciá -los com classes. Estamos especificando nomes de classe separados para os títulos, "A", "B", "C" e "D". Dentro da etiqueta de estilo de uma cabeça, as classes são definidas para estilizar separadamente os títulos. Embora tenhamos estilizado os títulos de maneira bastante semelhante, é necessário fazer isso separadamente e não misturá -los. Temos criado uma borda ao redor da primeira direção com uma cor vermelha sólida e será de largura 3 pixels.

A mesma propriedade "fronteira" foi usada para as outras três classes que contêm "B", "C" e "D". A única mudança é a cor azul sólida, a cor verde sólida e a cor da orquídea sólida, em vez da cor vermelha para o restante dos títulos. Depois de adicionar a borda de 3 pixels em torno de todos os títulos, é hora de adicionar um raio à fronteira. Usamos a propriedade do Radio de Fronteira para adicionar uma fronteira de 25 pixels à direção 1. Esse valor único para a propriedade do radio de fronteira seria manchado para todos os 4 cantos de uma borda igualmente.

Depois disso, usamos dois valores para a propriedade "Radio de fronteira". Aplicamos esses valores para o título três: o primeiro valor para o canto superior esquerdo, o segundo para o canto superior direito e inferior esquerdo e o terceiro valor para o canto inferior direito. O último estilo para o cabeçalho 4 contém 4 valores para a propriedade Radius de fronteira: superior esquerdo, canto superior direito, canto inferior e inferior direito, respectivamente, respectivamente. Vamos salvar e executar este código.

Com o uso de valores diferentes para o radiato de fronteira, temos os títulos alterados na página da web mostrados abaixo. O uso da propriedade do radiato de fronteira com 25 pixels tem feito a curva do radio de fronteira de todos os lados para o título 1. Depois disso, o uso da propriedade Radius de fronteira com 2 valores tem exibido uma curva mais descrita para os cantos superior esquerdo e inferior direito em comparação com os cantos superior e inferior esquerdo no cabeçalho 2. O uso de três valores para o cabeçalho três está mostrando a mudança de borda de contorno clara nos cantos superior e inferior esquerdo em comparação com outros lados. O último título tem mostrado a mudança em todos os cantos.

Exemplo 02:

É hora de criar um esboço para uma fronteira junto com curvas em seus cantos. Então, estamos usando um total de 3 títulos dentro da etiqueta "corpo" de uma tag html. Os títulos são inicializados com a tag "H1". O maior tamanho de tamanho a ser produzido na página da web. Todos os três títulos são especificados com três classes diferentes: A, B e C. Essas classes serão usadas na tag de estilo para estilizar os títulos de maneira diferente.

Então, dentro da etiqueta de estilo de uma etiqueta "cabeça" no arquivo html, especificamos os títulos junto com suas aulas para estilizá -las separadamente. Usamos a propriedade do radiato de fronteira para todos os três títulos, enquanto o raio foi definido para valores diferentes para os três títulos: 10px, 25px e 50px. O preenchimento e a largura para todos os três títulos foram especificados com os mesmos valores, 10px e 500px, respectivamente. Temos usado a propriedade de altura para os dois primeiros títulos, 40px cada. Estamos definindo a propriedade em segundo plano para o primeiro fundo de cor verde e verde.

A propriedade da fronteira foi usada para a 2ª e a terceira cabeçada para especificar a espessura da borda, 5px. Seu estilo é sólido e a cor de uma borda a ser gerada. A propriedade de esboço para as fronteiras foi usada apenas no terceiro título, criando um contorno pontilhado de 5px de espessura. Vamos salvar e compilar este código para ver as mudanças.

A saída deste código HTML tem mostrado o primeiro cabeçalho uma pequena curva dos cantos sem borda fina e cheia da cor verde de fundo. A borda roxa do cabeçalho 2 é mais curiosa e o rumo 3 contém uma borda com um contorno pontilhado.

Conclusão:

Este guia está demonstrando o uso de fronteiras nos códigos HTML, juntamente com suas outras propriedades, como radiografia de fronteira e esboço. Discutimos os exemplos HTML para estilizar as curvas de uma borda com a ajuda de uma propriedade de Radius de fronteira. Junto com isso, vimos como podemos preencher as fronteiras de elementos específicos com a propriedade em segundo plano e criar contornos fora da fronteira usando a propriedade de esboço. Ao longo desses exemplos, o uso de propriedades de largura, altura e preenchimento foi muito benéfico para ser utilizado no código.