La box-decoration-breakpropiedad le permite controlar cómo se dibujan las decoraciones de las cajas en los fragmentos de un elemento "roto". Un elemento puede dividirse en fragmentos al final de una línea, sobre columnas o en saltos de página.
.module ( box-decoration-break: clone; )Las propiedades de la decoración de la caja controlados por box-decoration-breakson: background(y sus sub-propiedades), border, border-radius, border-image, box-shadow, margin, y padding.
Valores
slice: el valor inicial. Las decoraciones de caja se aplican al elemento en su conjunto y se rompen en los bordes de los fragmentos del elemento.clone: las decoraciones se aplican a cada fragmento del elemento como si los fragmentos fueran elementos individuales intactos. Los bordes envuelven los cuatro bordes de cada fragmento del elemento y los fondos se vuelven a dibujar por completo para cada fragmento.
Uso
box-decoration-break puede ayudar a mantener un diseño consistente entre los fragmentos de un elemento roto.
En esta imagen de ejemplo, un párrafo con un borde naranja y un margen superior de 1 em se divide en dos columnas. El párrafo superior tiene el box-decoration-breakvalor inicial de slice. El párrafo inferior tiene el clonevalor.
Artículo y demostración de eso.
Manifestación
La box-decoration-breakpropiedad tiene soporte de navegador limitado. Esta demostración funciona mejor en Firefox 37+, donde box-decoration-breakes totalmente compatible.
Vea el Pen 1074b03653ffb32b88a6f88823c3de34 por CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
En el momento de escribir este artículo, solo Firefox es totalmente compatible box-decoration-break. Los navegadores Webkit y Opera admiten parcialmente box-decoration-breakelementos en línea en saltos de línea, pero no en saltos de columna o página.
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Ninguno | 4,4 * | 7.1 * |
* soporte parcial con -webkitprefijo.