box-decoration-break

用于控制元素片段在多行、多列或多页中如何渲染的工具类。

快速参考

类	属性
box-decoration-clone	box-decoration-break: clone;
box-decoration-slice	box-decoration-break: slice;

示例

基础示例

使用 box-decoration-slice 和 box-decoration-clone 工具类，控制 background、border、border-image、box-shadow、clip-path、margin 和 padding 等属性是按一个连续片段渲染，还是按彼此独立的块渲染：

box-decoration-slice

Hello
World

box-decoration-clone

Hello
World

<!-- [!code classes:box-decoration-slice,box-decoration-clone] -->
<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>

响应式设计

使用 md: 等断点变体作为 box-decoration-break 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<div class="box-decoration-clone md:box-decoration-slice ...">
 <!-- ... -->
</div>

了解如何使用变体，请参阅变体文档。