Imagem redonda do CSS
O uso de imagens é muito importante no código HTML, especialmente quando você trabalha em um projeto de site contendo muitas fotos deslizando em sua página inicial ou em qualquer outra página. Para o uso de imagens na linguagem de script html, tendemos a usar a tag "IMG". Essas imagens podem ser definidas para seus tamanhos originais, ou o tamanho também pode ser alterado em termos de altura e largura. Junto com isso, a linguagem HTML fornece a propriedade "Radio de fronteira" para alterar o raio de qualquer elemento como título ou imagem. No caso das imagens, ele mudará a forma do canto de uma imagem de um para outro. Dentro deste artigo, estaremos deliberando o uso da propriedade de Radius de Fronteira para converter uma imagem em um arredondado. Estaremos olhando para a imagem que será utilizada nos códigos HTML para moldá -la em torno do código do Visual Studio. Você pode ver a imagem chamada “Novo.png ”anexado na captura de tela abaixo. Vamos usá -lo em nosso código do Visual Studio para fazer isso.
Exemplo 01:
Antes de moldar uma imagem para arredondar, devemos ver como uma imagem pode ser inserida na página da web html sem alterar sua forma original. Então, estaremos usando o “novo.imagem png ”neste pedaço de código html. Criamos um novo arquivo HTML em nosso diretório atual do Windows e o chamou de "CSS". Depois disso, abrimos no código do Visual Studio e adicionamos o script HTML mostrado abaixo. Este script foi iniciado com a tag HTML "Doctype" padrão seguida pela tag "html". A tag HTML está mostrando que esta será uma página da web baseada em HTML e a tag HTML será fechada depois de todas as tags no final.
Após a tag html, temos as duas tags mais básicas e mais usadas de arquivos HTML: tags de cabeça e corpo. A etiqueta principal contém as informações sobre o título e o estilo do cabeçalho. Enquanto a etiqueta corporal conterá todos os dados, contêineres e outros elementos usando as outras tags. No momento, deixamos a etiqueta da cabeça vazia e adicionamos a tag de título do tamanho "2" e a imagem "IMG" na tag "Body". A tag de cabeçalho é usada para simplesmente colocar um título no início de uma página da web html enquanto a tag de imagem foi usada para inserir o novo.imagem PNG na página da web usando a variável "SRC".
Além disso, usamos a tag "estilo" na tag "IMG" para definir a largura "200 pixels" de uma imagem usando a propriedade "largura" de uma imagem. As tags de corpo e HTML foram fechadas aqui.
Vamos apenas salvar nosso código dentro do arquivo usando Ctrl+S e depra -o usando o botão "Executar" na barra de tarefas do Código do Visual Studio. Ele pedirá a plataforma do navegador na qual você deseja que ela seja executada. Selecionamos o Chrome para executá -lo. A saída foi mostrada abaixo. A página da web html está mostrando o cabeçalho preto do tamanho 2. A imagem foi exibida com sua forma original com um tamanho diferente. A largura é igual a 200 pixels conforme definido na propriedade Style.
Vejamos moldar nossa imagem "rodada" dentro do mesmo código HTML. Para isso, precisamos abrir o mesmo arquivo html no código do Visual Studio e atualizá -lo. Como você sabe, fazer alterações em qualquer forma de imagem está na seção de estilo. Então, precisamos usar o estilo CSS nesse mesmo código HTML com a ajuda de uma tag "estilo" no cabeçalho ou na tag "Head". O restante do código será deixado intacto e não será atualizado.
Agora, dentro da tag "estilo" deste cabeçalho de código, temos que mencionar o nome de um elemento a ser atualizado (i.e., A tag "IMG".) Adicione colchetes encaracolados e comece a adicionar propriedades para alterar o elemento de acordo com sua necessidade. Então, usamos a propriedade "Radio de fronteira" dentro dos colchetes encaracolados de uma tag "IMG" para modelar e especificar seu valor como 50 %. Você também pode adicionar pixels em uma porcentagem quando se trata de escolher uma unidade para qualquer valor numérico no estilo CSS. Isso é sobre a mudança. Vamos salvar este código primeiro. Depois de salvar esse código com Ctrl+S, precisamos simplesmente executá -lo usando o botão "Executar" da barra de tarefa do Código do Visual Studio. Novamente, você precisa selecionar o navegador no qual deseja exibir seus dados de saída.
A execução deste código nos levaria à saída, conforme exibido abaixo. O uso de valores de propriedades de Radius de fronteira até 5 % faz da imagem “Novo.png ”quadrado para rodar. As bordas seriam arredondadas como mostrado na imagem abaixo. Trata-se de usar a propriedade de Radio de Fronteira para converter uma imagem simples de forma quadrada em uma forma arredondada ou qualquer outra forma.
Exemplo 02:
A mesma propriedade pode ser usada de outras maneiras para alterar a forma de uma imagem. Dentro deste exemplo, veremos como os valores aleatórios podem alterar a forma de uma imagem simples. Então, dentro da etiqueta corporal deste script HTML, estamos utilizando a tag "IMG" 4 vezes. Em todas essas 4 tags, usamos o mesmo “novo.imagem png ”repetidamente com a largura de 200 pixels para cada forma.
Além disso, para alterar separadamente a forma das imagens em uma etiqueta de estilo, precisamos especificá -las com diferentes classes: A, B, C e D, como mostrado em cada tag "img". Dentro da tag de estilo, usamos as tags "img" junto com suas classes especificadas (a, b, c e d) para alterar os cantos de cada forma separadamente. Os valores de 50%, 0%, 20%e 250%15%foram usados para 1º, 2º, 3º e 4º imagens, respectivamente, respectivamente. Vamos executar este código para ver os resultados.
As 4 formas diferentes de uma imagem foram geradas como mostrado abaixo.
As mesmas formas mesmas ou semelhantes podem ser alcançadas com a propriedade simples de radiografia de fronteira usando os 4 valores laterais por vez: superior esquerdo, canto superior direito, canto inferior esquerdo e canto inferior direito, como mostrado abaixo. Tentamos esta propriedade simples de radiússio de fronteira por 4 cantos, juntamente com a propriedade de largura e altura das imagens definidas para 150 pixels para todos. Vamos salvar e executar este código.
Usando o formato simples para a propriedade Radius de fronteira, obtivemos as 4 formas mostradas por um único “novo.imagem png ”.
Conclusão:
O uso e a importância da etiqueta "IMG" foram discutidos junto com o uso da propriedade Radius de fronteira. Discutimos como uma propriedade de radioteio de fronteira pode alterar as bordas de qualquer imagem ou indo para formas diferentes com os valores simples, inferior, esquerda e direita. Para isso, discutimos exemplos muito simples e básicos do script html usando uma única imagem dentro da tag "IMG" e estilizando -a. Atingimos nosso objetivo convertendo uma imagem em uma forma quadrada, redonda, oval e arredondada, usando esta propriedade do Radius de fronteira.