Como criar bordas da imagem repetitivas em css3

Um dos usos mais comuns para imagens repetitivas em CSS3 é criar fronteiras feitas de imagens. Infelizmente, esta técnica não funciona bem com o Internet Explorer 9. Ele faz o trabalho, no entanto, com todas as versões mais recentes do Chrome, Firefox e Internet Explorer 10. O procedimento a seguir toma o exemplo SimpleGraphics criado anteriormente e adiciona uma borda pata-cópia a ele.

1. Abra o SimpleGraphics.HTML Arquivo.

   Você precisa modificar a página de modo que há uma nova

   para manter a margem, o que realmente não é parte da imagem. Se você tentar anexar os gráficos de margem para o recipiente de imagem existente, os gráficos aparecerá no centro margem do recipiente de imagem, e não como imagens completas.

2. Adicionar um novo

   para a página como mostrado aqui.

   Uma imagem de um gato bonito!

3. modificar o tag para que ele se parece com isso:

4. Salve o arquivo HTML como BorderGraphics.HTML.

5. Abra o arquivo SimpleGraphics.CSS.

   Você precisa mudar os estilos de modo que eles vão trabalhar com os novos recipientes encontrados no arquivo HTML. Pense sobre ser a fronteira uma caixa que inclui uma caixa segurando a imagem e legenda. O que você recebe em vez de uma única caixa de imagem é uma caixa dentro de uma caixa.

6. Adicionar um novo estilo #BorderContainer como a mostrada aqui.

   
   
   
   

   #BorderContainer {fronteira de estilo: sólido-fronteira de largura: 20 p; fronteira-imagem: URL (PawPrint.jpg) 25 22 23 de enchimento durante todo o estofamento: 24 pixels; flutuador: esquerda; posição: absoluta-altura: 465 pixels; largura: 440px ; esquerdo: 50% -margin-esquerda: -244px;}

   A maioria dessas propriedades são os mesmos que aqueles originalmente usado para o estilo #ImageContainer. o BorderContainer

   é agora o recipiente externo, para que posicioná-lo em vez do ImageContainer
   . Existem algumas alterações nas medidas para acomodar o tamanho da fronteira.

   A maior mudança é a adição da propriedade border-image. Você fornece o URL da imagem que você deseja usar, juntamente com o interior offset da imagem de fronteira, a largura da imagem, e o início de imagem.

   O valor de preenchimento informa ao navegador para preencher o

   com cópias da imagem e o valor rodada informa ao navegador para redimensionar a imagem de modo a que um número par de imagens preencher o
   .

   Descobrir os números para uma imagem de fronteira pode ser difícil e demorado. Felizmente, você pode usar o border-image-gerador para fazer o trabalho para você. Basta fornecer a localização da imagem Beira você deseja usar e, em seguida, usar os controles deslizantes para descobrir valores ideais para colocar a imagem em torno de um

   . Você pode copiar os resultados directamente a partir da página para a sua aplicação.

7. Modificar o estilo #ImageContainer para que ele reflete seu novo papel de um recipiente interno.

   #ImageContainer {margem: 20 p; altura: 420px; largura: 400 p; cor de fundo: Whitehead}

8. Salve o arquivo CSS como BorderGraphics.CSS.

9. Carregar a página BorderGraphics.

   Irá ver a página. Observe que os gráficos de fronteira cercar tanto a imagem e sua legenda.