Como criar uma borda em torno de uma imagem em CSS3

Uma das mudanças mais comuns que você pode fazer para uma imagem em CSS3 é adicionar uma borda. Isso desencadeia a imagem do outro conteúdo na página. Claro, CSS3 oferece uma ampla gama de tipos de fronteira. O truque é fazer com que a fronteira para exibir ao redor da imagem de uma forma tal que você pode executar outras tarefas com essa fronteira mais tarde.

É aí que o

usado como um recipiente para o tag mostrado no exemplo anterior) - e pode interagir com o recipiente de várias maneiras. O procedimento a seguir ajuda a adicionar uma borda ao redor da imagem.

1. Criar um novo arquivo CSS com o seu editor de texto.

   Seu editor pode não suportar arquivos CSS. Qualquer arquivo de texto vai fazer.

2. Digite o seguinte informações de estilo CSS.

   #ImageContainer {Border-style: sulco-border-width: thick-border-color: gray-padding: 5px; float: left;}

   A maioria desta informação estilo é sobre a fronteira. Adicionando estofo para a fronteira torna ficar fora mais como um quadro. O valor flutuante mantém a

   em torno da imagem, em vez de ter que seguir o lado direito do navegador, quando um utilizador redimensionar a janela do navegador.

   Se você deseja que a imagem no lado direito da página, ao invés do esquerdo, substituto float: right ;. O recipiente inteiro, imagem incluída, vai residir no lado direito da página, em vez de à esquerda. Como o usuário muda a janela do navegador, a imagem permanecerá o mesmo tamanho, mas ela se moverá com o lado direito da janela do navegador.

3. Salve o arquivo como SimpleGraphics.CSS.

4. Adicione o seguinte código para o área do arquivo HTML.

   Este código cria o vínculo entre o arquivo HTML eo arquivo CSS.

5. Salve o arquivo HTML e recarregue a página.

   Você vê a fronteira.