Mixin vendor de SISASS para aplicar la propiedad box-decoration-break con su versión prefijada -webkit- y la sintaxis estándar.
Esta propiedad controla cómo se repiten o se continúan decoraciones como el background, el border y el padding cuando una misma caja inline se fragmenta en varias líneas, columnas o páginas. Resulta útil para textos destacados, etiquetas o chips que necesitan conservar un acabado visual coherente al partirse.
Nota: Su uso suele ser más útil en elementos con display: inline o inline-block que realmente puedan fragmentarse. Con slice, la decoración se trata como una sola caja continua y se corta entre fragmentos; con clone, cada fragmento vuelve a dibujar su fondo, borde y padding de forma independiente.
@mixin box-decoration-break($br);
| Parámetro | Tipo | Default | Descripción |
|---|---|---|---|
| br | Keyword | String | - | Define el valor que se asignará a la propiedad box-decoration-break. |
Un texto con salto de línea para mostrar el comportamiento del fondo.
Un texto con salto de línea para mostrar el comportamiento del fondo.
<div class="box_decoration_break_example">
<div class="box_decoration_break_item">
<div class="box_decoration_break_label">slice</div>
<span class="box_decoration_break_text box_decoration_break_text--slice">
Un texto con salto de línea para mostrar el comportamiento del fondo.
</span>
</div>
<div class="box_decoration_break_item">
<div class="box_decoration_break_label">clone</div>
<span class="box_decoration_break_text box_decoration_break_text--clone">
Un texto con salto de línea para mostrar el comportamiento del fondo.
</span>
</div>
</div>