Tailwind CSS - 效果

Tailwind CSS 效果包括**盒子阴影、阴影颜色、不透明度、背景混合**和**混合**模式。这些是 Tailwind 效果的重要概念，要添加有吸引力的效果，学习这些概念是必要的。

Tailwind CSS 效果参考

下面提到的主题可用于在 Tailwind 中添加效果。

主题	描述	示例
Tailwind CSS - 盒子阴影	用于控制元素的盒子阴影。	尝试一下
Tailwind CSS - 盒子阴影颜色	用于控制元素的盒子阴影颜色。	尝试一下
Tailwind CSS - 不透明度	用于控制任何元素的透明度。	尝试一下
Tailwind CSS - 混合模式	用于控制元素应如何与背景混合。	尝试一下
Tailwind CSS - 背景混合模式	用于控制元素的背景图像应如何与其背景颜色混合。	尝试一下

Tailwind CSS 效果示例

下面的示例将说明 Tailwind CSS，我们将看到给定代码中每个提到的主题的影响。

示例

<!DOCTYPE html>
</html>

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

<body class="p-4">
    <h1 class="text-3xl mb-3"> Tailwind CSS Effects</h1>
    <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-2xl 
    </div> 
    <br>
    <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center shadow-green-950">
            shadow-green-950 
    </div> 
    <br>
    <button class="bg-green-500 opacity-50 
                       w-24 h-12 rounded-lg m-2">
            opacity-50
    </button>
    <br>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800 
                    w-36 h-36 rounded-full">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    w-36 h-36 rounded-full">
        </div>
    </div>
</body>

</html>

打印页面