Tailwind CSS - 模糊效果

Tailwind CSS 模糊效果是一個實用程式類，用於將模糊濾鏡應用於元素。

Tailwind CSS 模糊效果類

以下是用於有效應用模糊濾鏡的Tailwind CSS 模糊效果類的列表。

類名	CSS 屬性
blur-none	filter: ;
blur-sm	filter: blur(4px);
blur	filter: blur(8px);
blur-md	filter: blur(12px);
blur-lg	filter: blur(16px);
blur-xl	filter: blur(24px);
blur-2xl	filter: blur(40px);
blur-3xl	filter: blur(64px);

Tailwind CSS 模糊效果類的功能

blur-none: 此類用於從元素中刪除模糊濾鏡。
blur-sm: 此類用於將小的模糊濾鏡應用於元素，模糊半徑為 4px。
blur: 此類用於將模糊濾鏡應用於元素，模糊半徑為 8px。
blur-md: 此類用於將中等模糊濾鏡應用於元素，模糊半徑為 12px。
blur-lg: 此類用於將大的模糊濾鏡應用於元素，模糊半徑為 16px。
blur-xl: 此類用於將特大的模糊濾鏡應用於元素，模糊半徑為 24px。
blur-2xl: 此類用於將超大的模糊濾鏡應用於元素，模糊半徑為 40px。
blur-3xl: 此類用於將特超大的模糊濾鏡應用於元素，模糊半徑為 64px。

Tailwind CSS 模糊效果類示例

以下示例將說明 Tailwind CSS 模糊效果類的不同可見性和實用程式。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Blur Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Blur-0</h3>
            <img class="blur-0 object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-sm</h3>
            <img class="blur-sm object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur</h3>
            <img class="blur object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-md</h3>
            <img class="blur-md object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-lg</h3>
            <img class="blur-lg object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-xl</h3>
            <img class="blur-xl object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
    </div>
</body>

</html>

列印頁面