Tailwind CSS - 盒子装饰断开

Tailwind CSS 盒子装饰断开是一个实用程序类，演示了当元素被分割时，如何跨多行、多列或多页呈现边框、背景、边框图像、盒子阴影、剪辑路径、边距和填充等装饰属性。

Tailwind CSS 盒子装饰断开类

以下是Tailwind CSS 盒子装饰断开类列表，有效地展示了如何跨多行、多列或多页呈现元素片段。

类	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; 属性。它具有默认行为，盒子装饰应用于整个元素，并在元素片段的边缘处断开。

Tailwind CSS 盒子装饰断开类示例

以下示例将说明 Tailwind CSS 盒子装饰断开类。

演示盒子装饰克隆类

以下示例演示了盒子装饰克隆类的使用。

<!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>

打印页面