Propriedade CSS border-image-slice
Exemplo
Especifique como cortar a imagem da borda:
#borderimg {
border-image-slice: 30%;
}
Definição e uso
A border-image-slice
propriedade especifica como dividir a imagem especificada por
border-image-source . A imagem é sempre dividida em nove seções: quatro cantos, quatro bordas e o meio.
A parte "meio" é tratada como totalmente transparente, a menos que a palavra-chave fill seja definida.
Dica: Observe também a propriedade border-image (uma propriedade abreviada para definir todas as propriedades border-image-*).
Valor padrão: | 100% |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.borderImageSlice="30%" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Sintaxe CSS
border-image-slice: number|%|fill|initial|inherit;
Nota: A border-image-slice
propriedade pode assumir de um a quatro valores. Se o quarto valor for omitido, é o mesmo que o segundo. Se o terceiro também for omitido, é o mesmo que o primeiro. Se o segundo também for omitido, é o mesmo que o primeiro.
Valores de propriedade
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: Imagens de borda CSS
Referência CSS: propriedade border-image
Referência CSS: propriedade border-image-outset
Referência CSS: propriedade border-image-repeat
Referência CSS: propriedade border-image-source
Referência CSS: propriedade border-image-width
Referência HTML DOM: propriedade borderImageSlice