Tailwind CSS - 投影阴影

Tailwind CSS 投影阴影是一个实用程序类，用于将投影阴影过滤器应用于元素。

Tailwind CSS 投影阴影类

以下是用于有效应用投影阴影过滤器的Tailwind CSS 投影阴影类的列表。

类	CSS 属性
drop-shadow-sm	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
drop-shadow	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
drop-shadow-md	filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
drop-shadow-lg	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
drop-shadow-xl	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
drop-shadow-2xl	filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
drop-shadow-none	filter: drop-shadow(0 0 #0000);

Tailwind CSS 投影阴影类的功能

drop-shadow-sm: 此类用于向元素添加一个小投影阴影。
drop-shadow: 此类用于将投影阴影过滤器应用于元素 li>
drop-shadow-md: 此类用于将中等投影阴影过滤器应用于元素。
drop-shadow-lg: 此类用于将大投影阴影过滤器应用于元素。
drop-shadow-xl: 此类用于将特大投影阴影过滤器应用于元素。
drop-shadow-2xl: 此类用于将双特大投影阴影过滤器应用于元素。
drop-shadow-none: 此类用于从元素中删除投影阴影过滤器。

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-8">
    <h2 class="text-2xl font-bold mb-7">
        Tailwind CSS Drop Shadow Classes
    </h2>
    <div class="flex flex-wrap gap-8">
        <div>
            <p class="text-base mb-2">Drop-shadow-sm</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-sm
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-md</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-md
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-lg</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-lg
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-xl</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-xl
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-2xl</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-2xl
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
        <div>
            <p class="text-base mb-2">Drop-shadow-none</p>
            <div class="w-24 h-24 bg-gray-200 drop-shadow-none
                        rounded-tl-3xl rounded-br-3xl">
            </div>
        </div>
    </div>
</body>
</html>

打印页面