Tailwind CSS - 盒装饰断开

Tailwind CSS：盒装饰断裂

Tailwind CSS 中的 box-decoration-break 工具类控制当元素在多行、多列或多页中断裂（碎片化）时，background、border、padding 和 box-shadow 等属性的渲染方式。

核心工具类：slice 与 clone

有两个主要的类控制此行为，它们对应于 box-decoration-break CSS 属性。

Class	CSS Property	行为
box-decoration-slice	box-decoration-break: slice;	元素作为一个整体被渲染，然后在断裂处被“切片”。装饰（如内边距和边框）不会应用于断裂边缘。
box-decoration-clone	box-decoration-break: clone;	元素的每个碎片都被渲染，就好像它是一个单独的元素一样。装饰独立地应用于每个碎片。

实际示例

当处理换行到多行的行内元素时，这种区别会变得清晰，特别是当它们具有内边距、边框或背景渐变时。

默认行为：box-decoration-slice

使用 slice（默认行为）时，背景渐变会平滑地跨行延伸，并且水平内边距仅应用于整个 <span> 元素的起始和结束位置。

<!-- 注意：这假设了一个现代的 Tailwind CSS 项目设置 -->
<div class="p-8">
    <h3 class="text-xl font-bold mb-4">盒装饰切片（默认）</h3>
    <p class="text-lg leading-relaxed">
        这是一个句子，其中包含一个
        <span class="box-decoration-slice bg-gradient-to-r from-indigo-500 to-pink-500 text-white p-2 leading-[2.5]">
            高亮文本元素，它会换行到多行。
        </span>
         请注意内边距和渐变是如何被“切片”的。
    </p>
</div>

克隆装饰：box-decoration-clone

使用 clone 时，每行都会获得自己独立的装饰。背景渐变会在每行重新开始，并且水平内边距会应用于每行的左侧和右侧。

<!-- 注意：这假设了一个现代的 Tailwind CSS 项目设置 -->
<div class="p-8">
    <h3 class="text-xl font-bold mb-4">盒装饰克隆</h3>
    <p class="text-lg leading-relaxed">
        这是一个句子，其中包含一个
        <span class="box-decoration-clone bg-gradient-to-r from-indigo-500 to-pink-500 text-white p-2 leading-[2.5]">
            高亮文本元素，它会换行到多行。
        </span>
         看看每一行是如何被装饰成独立的盒子。
    </p>
</div>

何时使用

• 使用 box-decoration-slice 当你希望装饰在碎片之间保持连续、不中断时，这通常是期望的默认行为。
• 使用 box-decoration-clone 用于需要强调断裂元素中单个行的风格化效果，例如创建一种块状高亮文本效果，使每行都有自己独特的背景和内边距。

响应式变体

像 Tailwind 中的所有工具类一样，你可以在不同的断点处有条件地应用 box-decoration-break 工具类。例如，md:box-decoration-clone 只会在中等屏幕及更大尺寸的屏幕上应用克隆行为。