1. 布局
  2. box-decoration-break

布局

box-decoration-break

用于控制元素片段如何在多行、多列或多页中呈现的实用工具。

样式
box-decoration-clone
box-decoration-break: clone
box-decoration-slice
box-decoration-break: slice

示例

基本示例

使用 box-decoration-slicebox-decoration-clone 实用程序来控制背景、边框、border-image、box-shadow、clip-path、margin 和 padding 等属性应呈现为元素是一个连续片段,还是不同的块

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>

响应式设计

前缀a box-decoration-break 实用工具 使用像 md: 这样的断点变体,仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策