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: 此類用於從元素中刪除投影陰影過濾器。

Tailwind CSS 投影陰影類示例

以下示例將說明 Tailwind CSS 投影陰影類的不同可見性和實用程式。

示例

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

列印頁面