manual de referência CSS

regra CSS @ (RULES)

大全 de propriedades CSS

CSS3 border-image-source propriedade CSS3 border-image-repeat propriedade

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

border-image-A propriedade sliceborder-image-sourcea imagem especificada é dividida em9área: os quatro cantos, as quatro laterais e o meio. Ele faz isso especificando4deslocamentos para dentro para alcançar isso, esses deslocamentos geralmente criam uma3×3da grade.

A parte central da imagem de borda será descartada e não será usada pela borda em si, masbackground-imageSe aparecer a palavra-chave fill, use-a como imagem de fundo.

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

Valor padrão:	100%
Aplicável a:	Esta propriedade pode ser aplicada a qualquer elemento, mas quando se trata de elementos de tabela (como tr, th, td), a borda-collapse propriedade valor é collapse quando border-image-slice propriedade não é válida. Também se aplica a::first-letter。
Herança:	Não
Animável:	Não.Por favor, consulte: Propriedades de animação。
Versão:	CSS3nova funcionalidade
JavaScript sintaxe:	object.style.borderImageSlice="60% 60%"

border-image-slice sintaxe de uso

A sintaxe dessa propriedade é a seguinte:

border-image-slice: [ number | percentage ]　1　to　4　values | fill | initial | inherit

Os seguintes exemplos mostram como usar border-image-slice propriedade.

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
number	Para imagens raster, representa a distância da imagem (em pixels), para imagens vetoriais, representa o coordenadas vetoriais.
percentage	Relativamente ao tamanho da imagem: largura da imagem deslocada horizontalmente, altura da imagem deslocada verticalmente.
fill	Se existir, mantenha a parte central da imagem. Caso contrário, considere o meio como transparente.
initial	Defina essa propriedade como seu valor padrão.
inherit	Se especificado, o elemento relacionado usa o border do pai-image-Cálculo do valor do slice propriedade.

Compatibilidade do navegador

border-image-Compatibilidade do navegador do slice propriedade, os números na tabela a seguir representam a versão mais baixa 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+