Syntax
box-decoration-break
Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
Overview
| Class | Declarations |
|---|---|
box-decoration-break:type | -webkit-box-decoration-break: type;
box-decoration-break: type;
|
box-decoration:slice | -webkit-box-decoration-break: slice;
box-decoration-break: slice;
|
box-decoration:clone | -webkit-box-decoration-break: clone;
box-decoration-break: clone;
|
Box Decoration Break
Basic usage
Slice
Use box-decoration:slice to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to the box as if it were one continuous fragment.
Box Decoration Break
<span class="box-decoration:slice rbr:2x rtl:2x">Box Decoration Break</span>Clone
Use box-decoration:clone to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to each fragment independently.
Box Decoration Break
<span class="box-decoration:clone">Box Decoration Break</span>Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="box-decoration:slice:hover box-decoration:slice@sm box-decoration:slice@dark box-decoration:slice@print">…</div>