Tailwind CSS - Blur
Tailwind CSS Blur 是一个用于将模糊滤镜应用于元素的实用类。
Tailwind CSS Blur 类
以下是用于有效应用模糊滤镜的 Tailwind CSS Blur 类列表。
| 类 | 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>
