Exemplo
Especifique como para repetir a imagem de fronteira:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Tente você mesmo " Definição e Uso
A propriedade-border-image repetição especifica se a imagem de fronteira deve ser repetido, arredondado ou alongado.
Dica: Veja também a border-image propriedade (a shorthand property for setting all the border-image-* properties) .
| Valor padrão: | stretch |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.borderImageRepeat="round" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15,0 | 11.0 | 15,0 | 6 | 15,0 |
CSS Syntax
border-image-repeat: stretch|repeat|round|initial|inherit;Note: Esta propriedade especifica a forma como as imagens para os lados e na parte do meio da imagem Beira são escalados e azulejos. Assim, você pode especificar dois valores aqui. Se o segundo valor for omitido, assume-se que seja o mesmo que o primeiro.
Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| stretch | Valor padrão. A imagem é ampliada para preencher a área | Jogue " |
| repeat | A imagem é de azulejos (repeated) para preencher a área | Jogue " |
| round | A imagem é de azulejos (repeated) para preencher a área. Se não preencher a área com um número inteiro de azulejos, a imagem é redimensionada para que caiba | Jogue " |
| space | A imagem é de azulejos (repeated) para preencher a área. Se não preencher a área com um número inteiro de telhas, o espaço extra é distribuído em torno das telhas | |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 Border Imagens
CSS Referência: border-image property
CSS Referência: border-image-outset property
CSS Referência: border-image-slice property
CSS Referência: border-image-source property
CSS Referência: border-image-width property
HTML DOM de referência: borderImageRepeat property