1. 布局
  2. box-decoration-break

布局

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)

¥Examples

基本示例(Basic example)

¥Basic example

使用 box-decoration-slicebox-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

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>

响应式设计(Responsive design)

¥Responsive design

box-decoration-break 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号