Tailwind CSS - Box Shadow

Tailwind CSS Box Shadow 是一个实用类，它提供了一种有效的方法来控制元素的盒阴影。

Tailwind CSS Box Shadow 类

以下是 Tailwind CSS Box Shadow 类的列表，这些类提供了一种有效的方法来处理 HTML 元素的盒阴影。

Tailwind CSS 框阴影类的功能

• shadow-sm 此类用于在框的外侧创建较亮或褪色的阴影。
• shadow 此类用于在框的外侧创建常规阴影。
• shadow-md 此类用于在框的外侧创建中等阴影。
• shadow-lg 此类用于在框的外侧创建较大阴影。
• shadow-xl 此类用于在框的外侧创建超大阴影。
• shadow-2xl 此类用于在框的外侧创建最深的阴影盒子。
• shadow-inner 此类用于创建盒子内侧的阴影。
• shadow-none 此类用于淡化阴影效果。

Tailwind CSS 盒子阴影类示例

以下示例将说明 Tailwind CSS 盒子阴影类的实用功能。

添加外阴影

要在任何元素的外部创建盒子阴影，我们可以使用"shadow-sm"、"shadow"、"shadow-md"、"shadow-lg"、"shadow-xl"或"shadow-2xl"等实用功能，为元素应用不同大小的外盒子阴影。

示例

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <p>Shadow Effect are Increasing on Each Div</p>
    <div class="flex">
        <div class="shadow-sm w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-sm 
        </div> 
        <div class="shadow w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow 
        </div> 
        <div class="shadow-md w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-md 
        </div> 
        <div class="shadow-lg w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-lg 
        </div> 
        <div class="shadow-xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-xl 
        </div> 
        <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-2xl 
        </div> 
    </div>
</body>

</html>

添加内阴影

要在任何元素的内部创建框阴影，我们可以使用 'shadow-inner' 类。

示例

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <p>Outer Shadow</p>
    <div class="shadow-lg w-24 h-24 bg-green-400 
                m-2 text-center">
        shadow-sm 
    </div>
    <div class="shadow-inner w-24 h-24 bg-green-400 
                m-2 text-center">
        shadow-sm 
    </div> 
</body>

</html>

悬停时添加阴影

我们可以通过在悬停时激活阴影类来突出显示任何元素上的阴影。

示例

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <div class="hover:shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            Hover On
    </div>
</body>

</html>