布局
box-decoration-break
Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
| 类 | 样式 |
|---|---|
box-decoration-clone | box-decoration-break: clone; |
box-decoration-slice | box-decoration-break: slice; |
示例(Examples)
基本示例(Basic example)
使用 box-decoration-slice 和 box-decoration-clone 工具来控制诸如背景、边框、边框图片、盒子阴影、裁剪路径、外边距和内边距等属性是应当像元素是一个连续片段一样渲染，还是作为独立块渲染：
🌐 Use the box-decoration-slice and box-decoration-clone utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks:
box-decoration-slice
Hello
World
World
box-decoration-clone
Hello
World
World
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span>响应式设计(Responsive design)
在 box-decoration-break 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。