⌘K

Propriedade border-image-slice

A propriedade border-image-slice indica ao navegador quais partes da imagem serão usadas para os cantos e quais para os lados (e qual parte será a central). Para os cantos vão 4 partes, para os lados vão 4 partes e uma parte (central) vai para o fundo do elemento (opcionalmente, palavra-chave fill).

Para informações mais detalhadas, consulte a propriedade border-image.

Sintaxe

<+css+> seletor { border-image-slice: de 1 a 4 números | de 1 a 4 porcentagens; } <-css->

Com números e porcentagens, separados por espaço, pode estar a palavra-chave fill.

Valores

Valor Descrição
porcentagens As porcentagens são calculadas em relação ao tamanho da imagem. Horizontais em relação à largura, verticais — em relação à altura.
números Números são pixels (para imagem rasterizada) ou coordenadas (para imagem vetorial). As unidades de medida não são especificadas.
fill O comportamento padrão assume que a parte central da imagem será descartada. Para utilizá-la, é necessário usar a palavra-chave fill além dos números ou porcentagens.

Quantidade de parâmetros

O deslocamento pode receber 1, 2, 3 ou 4 parâmetros. Observe que as unidades de medida para o deslocamento não são escritas (por exemplo, apenas 20, e não 20px). Também é possível definir a espessura em %.

Número de parâmetros Descrição
1 Espessura para todos os lados simultaneamente.
2 1 2; - 1px para topo e base, 2px para esquerda e direita.
3 1 2 3; - 1px para o topo, 2px para esquerda e direita, 3px para a base.
4 1 2 3 4; - 1px para o topo, 2px para a direita, 3px para a base, 4px para a esquerda.

Valor padrão: 100%(?).

Exemplo

html<div id="elem"></div>
css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Exemplo

html<div id="elem"></div>
css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Veja também

BackPropriedade border-image-sourceNextPropriedade border-image-repeat