Tailwind CSS - box-decoration-break
Tailwind CSS box-decoration-break 是一个实用类，用于演示当元素碎片化时，如何将边框、背景、边框图像、盒子阴影、剪辑路径、边距和填充等装饰属性渲染到多行、多列或多页上。
Tailwind CSS box-decoration-break 类
以下是 Tailwind CSS box-decoration-break 类列表，有效地展示了如何将元素碎片渲染到多行、多列或多页上。
| 类 | CSS 属性 |
|---|---|
| box-decoration-clone | box-decoration-break: clone; |
| box-decoration-slice | box-decoration-break: slice; |
Tailwind CSS 盒子装饰中断类的功能
- box-decoration-clone: 此类替换 CSS box-decoration-break: clone; 属性。它将盒子装饰应用于每个元素片段，就好像这些片段是单独的元素一样。
- box-decoration-slice: 此类替换 CSS box-decoration-break: slice; 属性。它有一个默认行为:Box 装饰器会应用于整个元素，并在元素片段的边缘断开。
Tailwind CSS Box 装饰器断开类示例
以下示例将说明 Tailwind CSS Box 装饰器断开 类。
演示 Box 装饰器克隆类
以下示例演示了 Box 装饰器克隆类 的使用。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5">
<h2 class="text-3xl mb-3">
Tailwind CSS - Box Decoration Clone Class
</h2>
<span class="box-decoration-clone
bg-gradient-to-r
from-indigo-600
to-pink-500 text-2xl
text-white px-2">
Tailwind CSS<br>
Box Decoration Clone<br>
Example
</span>
</body>
</html>
演示盒子装饰切片类
以下示例演示了盒子装饰切片类的使用。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-5">
<h2 class="text-3xl mb-3">
Tailwind CSS - Box Decoration Clone Class
</h2>
<span class="box-decoration-slice
bg-gradient-to-r
from-indigo-600
to-pink-500 text-2xl
text-white px-2">
Tailwind CSS<br>
Box Decoration Clone<br>
Example
</span>
</body>
</html>
