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>

列印頁面