Atributo CSS border-image-slice

definição e uso

a propriedade border-image-slice define o deslocamento interno da borda da imagem.

veja também:

tutorial do CSS3:Bordas CSS3

exemplo

definir o deslocamento interno da borda da imagem:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

sintaxe do CSS

border-image-slice: number|%|fill;

notas:Essa propriedade define o deslocamento para dentro da imagem nas margens superior, direita, inferior e esquerda, a imagem é dividida em nove partes: quatro cantos, quatro lados e uma área central. A menos que a palavra-chave fill seja usada, a parte central da imagem será descartada. Se o quarto valor/porcentagem for omitido, ele será o mesmo que o segundo valor. Se o terceiro valor for omitido, ele será o mesmo que o primeiro valor. Se o segundo valor for omitido, ele será o mesmo que o primeiro valor.

valor da propriedade

valor descrição
number valor numérico, representando pixels na imagem (se for uma imagem raster) ou coordenadas vetoriais (se for uma imagem vetorial).
% porcentagem relativa ao tamanho da imagem: a largura afeta o deslocamento horizontal, a altura afeta o deslocamento vertical.
fill manter a parte central da imagem da borda.

detalhes técnicos

Valor padrão: 100%
Herança: não
Versão: CSS3
Sintaxe do JavaScript: object.style.borderImageSlice="50% 50%"

suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

ver border-image propriedade.