A box-decoration-breakpropriedade permite controlar como as decorações de caixa são desenhadas nos fragmentos de um elemento “quebrado”. Um elemento pode se quebrar em fragmentos no final de uma linha, nas colunas ou nas quebras de página.
.module ( box-decoration-break: clone; )As propriedades de decoração da caixa controladas pela box-decoration-breaksão: background(e as suas sub-unidades), border, border-radius, border-image, box-shadow, margin, e padding.
Valores
slice: o valor inicial. As decorações da caixa se aplicam ao elemento como um todo e se quebram nas bordas dos fragmentos do elemento.clone: as decorações se aplicam a cada fragmento do elemento como se os fragmentos fossem elementos ininterruptos e individuais. As bordas envolvem as quatro bordas de cada fragmento do elemento e os planos de fundo são totalmente redesenhados para cada fragmento.
Uso
box-decoration-break pode ajudar a manter um design consistente entre os fragmentos de um elemento quebrado.
Nesta imagem de exemplo, um parágrafo com uma borda laranja e uma margem superior de 1em está dividido em duas colunas. O parágrafo superior possui o box-decoration-breakvalor inicial de slice. O parágrafo inferior tem o clonevalor.
Artigo e demonstração disso.
Demo
A box-decoration-breakpropriedade tem suporte limitado ao navegador. Esta demonstração funciona melhor no Firefox 37+, onde box-decoration-breaké totalmente compatível.
Veja a Caneta 1074b03653ffb32b88a6f88823c3de34 por CSS-Tricks (@ css-tricks) em CodePen.
Suporte para navegador
No momento em que este livro foi escrito, apenas o Firefox era totalmente compatível box-decoration-break. Os navegadores Webkit e Opera oferecem suporte parcial box-decoration-breaka elementos embutidos em quebras de linha, mas não em quebras de coluna ou página.
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Nenhum | 4,4 * | 7,1 * |
* suporte parcial com -webkitprefixo.