box-decoration-break

Índice

Definición de .box-decoration-break utilizado en CSS

La propiedad .box-decoration-break le permite controlar cómo se dibujan las decoraciones de cajas a través de los fragmentos de un elemento «roto». Un elemento puede entrar en fragmentos al final de una línea, a través de columnas o en los descansos de la página.

Ejemplo de empleo de box-decoration-break

Si te gustaría emplear esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:

.module {
  box-decoration-break: clone;
}

Otro ejemplo más avanzado de .box-decoration-break es el siguiente de CODEPEN:

Sintaxis de .box-decoration-break en CSS

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

Valores

Valor Descripción
rodaja Defecto. Las decoraciones de caja se aplican al elemento como un todo y se rompen en los bordes de los fragmentos del elemento.
clon Las decoraciones de caja se aplican a cada fragmento del elemento como si los fragmentos fueran elementos individuales. Los bordes envuelven los cuatro bordes de cada fragmento del elemento y los fondos se vuelven a dibujar por completo para cada fragmento
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .box-decoration-break

Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

Bibliografía

Echa un vistazo a estas otras propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso

Otros artículos que te podrían interesar: