manual de referência CSS

CSS @regras (RULES)

大全 de atributos CSS

CSS3 border-image-Atributo slice CSS3 border-image-Atributo outset

CSS3 border-image-Método de uso e exemplo da propriedade repeat

border-image-A propriedade repeat CSS especifica como escalar ou esticar a parte central da imagem da borda para que ela possa se ajustar ao tamanho da borda.

A tabela a seguir fornece a descrição de uso e histórico de versão deste atributo, bem como a sintaxe de uso do atributo no script JavaScript.

Valor padrão:	stretch
Aplicável a:	Todos os elementos, mas quando o elemento da tabela (como tr, th, td) tem border-A propriedade collapse, quando o valor é collapse, border-image-A propriedade repeat é inválida. Também se aplica a::first-letter。
Herança:	Não
Animável:	Não.Veja também Atributos de animação。
Versão:	CSS3nova funcionalidade
Sintaxe JavaScript:	object.style.borderImageRepeat="round"

border-image-Sintaxe de uso do repeat

A sintaxe dessa propriedade é a seguinte:

border-image-repeat: [ stretch | repeat | round | space ]　1　ou　2　values | initial | inherit

O exemplo a seguir demonstra como usar border-image-Atributo repeat.

Exemplo

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px sólido transparente;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

Teste e veja‹/›

Valor da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
stretch	A imagem é esticada para preencher o espaço entre as bordas. Este é o valor padrão.
repeat	A imagem é repetida ou repetida até que ela preencha o espaço entre as bordas.
round	A imagem é repetida ou repetida até que ela preencha o espaço entre as bordas. Se a área não puder ser preenchida completamente com o número inteiro de blocos, a imagem será escalonada para que ela possa ser escalonada.
space	A imagem é repetida ou repetida até que ela preencha o espaço entre as bordas. Se a área não puder ser preenchida completamente com os azulejos, o espaço extra será distribuído ao redor dos azulejos.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota a borda do pai border-image-Cálculo do valor do atributo repeat.

Compatibilidade do navegador

border-image-Compatibilidade do navegador do atributo repeat, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa propriedade.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+