Atributo box-decoration-break CSS

Definição e uso

A propriedade box-decoration-break define como aplicar o background, padding, borda, border-image, box-shadow, margem e clip-path do elemento quando o contorno do elemento é dividido.

Exemplo

Define a propriedade box-decoration-break:

span.ex1 { 
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
span.ex2 { 
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}

Experimente você mesmo

Sintaxe CSS

box-decoration-break: slice|clone|initial|inherit|unset;

Valor da propriedade

Valor Descrição
slice Padrão. A decoração da caixa é aplicada ao elemento como um todo e se rompe nas bordas dos pedaços do elemento.
clone

A decoração da caixa se aplica a cada pedaço do elemento, como se cada pedaço fosse um elemento único.

Cada pedaço do elemento envolvido pela borda é delimitado por quatro bordas, e a cada pedaço é redesenhado o fundo.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: slice
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3

Suporte do navegador

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

Seguindo a numeração de versão prefixada da primeira versão utilizada após -webkit-.

Chrome IE / Edge Firefox Safari Opera
22.0 -webkit- 79.0 32.0 6.1 -webkit- 11.5 -webkit-