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。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 模糊效果类示例

以下示例将说明 Tailwind CSS 模糊效果类的不同可见性和实用程序。

示例

Open Compiler

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

打印页面