Box Decoration Break 盒子装饰隔断

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

Class	Properties

基本用法

设置盒子装饰中断

使用 box-decoration-slice 和 box-decoration-clone 实用程序来控制诸如背景、边框、边框图像、框阴影、裁剪路径、边距和填充等属性是否应呈现为元素是一个连续片段还是不同的块。

box-decoration-slice

Hello
World

box-decoration-clone

Hello
World

<span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Hello<br />
  World
</span>
<span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Hello<br />
  World
</span>

有条件地应用

悬停，焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:box-decoration-slice 只在悬停时应用 box-decoration-slice 实用程序。

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

要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:box-decoration-slice 仅在中等屏幕尺寸及以上应用 box-decoration-slice 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。