Propiedad CSS box-decoration-break
La propiedad box-decoration-break es una propiedad CSS que especifica cómo se aplican el fondo, el relleno, el borde, la imagen de borde, la sombra de caja, el margen y el camino de recorte de un elemento cuando la caja está fragmentada.
La propiedad box-decoration-break tiene dos valores. El valor slice aplica las decoraciones a todo el elemento como si no estuviera fragmentado y luego recorta la caja en los bordes de cada fragmento. El valor clone aplica cada decoración a cada fragmento de forma independiente. Los bordes envuelven las cuatro esquinas de cada fragmento y los fondos se vuelven a dibujar completamente para cada fragmento. Ten en cuenta que la fragmentación puede ocurrir no solo por saltos de línea, sino también por saltos de página o de columna.
| Valor inicial | slice |
|---|---|
| Se aplica a | Elementos de nivel de bloque, contenedores flex y contenedores de cuadrícula. |
| Heredado | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.boxDecorationBreak = "clone"; |
Sintaxis
Sintaxis de la propiedad CSS box-decoration-break
box-decoration-break: slice | clone | initial | inherit | unset;A continuación se muestra un ejemplo con el valor clone, donde las decoraciones se aplican a cada fragmento como si los fragmentos fueran elementos individuales.
Ejemplo de la propiedad CSS box-decoration-break con el valor clone
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #1c87c9;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
}
span.box {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>Here the box-decoration-break is set to "clone".</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Resultado
Los navegadores modernos admiten esta propiedad de forma nativa sin prefijos, pero el prefijo -webkit- se incluye en los ejemplos para mantener la compatibilidad con versiones anteriores.
Veamos otro ejemplo donde se aplica el valor slice a la caja. Aquí la caja se recorta en trozos.
Ejemplo de la propiedad CSS box-decoration-break con el valor slice
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #ccc;
}
span.box {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Resultado
Ahora veamos cómo se aplica una sombra de caja a la caja recortada.
Ejemplo de la propiedad CSS box-decoration-break con el valor slice y sombra
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #cccccc;
box-shadow: 5px 4px 10px #666666;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span>Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
| slice | Las decoraciones de la caja se aplican a todo el elemento y se rompen en los bordes de los fragmentos del elemento. |
| clone | Las decoraciones de la caja se aplican a cada fragmento de forma individual. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS box-decoration-break?