Lzh on GitHub

box-decoration-break

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

快速参考

类名样式
box-decoration-clonebox-decoration-break: clone
box-decoration-slicebox-decoration-break: slice

示例

基本示例

使用 box-decoration-slice 和 box-decoration-clone 工具类控制背景、边框、边框图像、盒阴影、裁剪路径、外边距和内边距等属性应渲染为如同元素是一个连续的片段，还是不同的块：

box-decoration-slice

Hello
World

box-decoration-clone

Hello
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>

响应式设计

为 box-decoration-break 工具类添加断点变体的前缀（如 md:），以便仅在中等屏幕尺寸及以上应用该工具类：

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

在 变体文档 中了解更多关于使用变体的信息。