Tailwind CSS - 盒影

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

Tailwind CSS 盒影类

以下是提供有效处理 HTML 元素盒影的 **Tailwind CSS 盒影** 类列表。

类	CSS 属性
shadow-sm	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none	box-shadow: 0 0 #0000;

Tailwind CSS 盒影类的功能

**shadow-sm:** 此类用于在盒子的外侧创建较浅或褪色的阴影。
**shadow:** 此类用于在盒子的外侧创建常规阴影。
**shadow-md:** 此类用于在盒子的外侧创建中等阴影。
**shadow-lg:** 此类用于在盒子的外侧创建较大的阴影。
**shadow-xl:** 此类用于在盒子的外侧创建超大阴影。
**shadow-2xl:** 此类用于在盒子的外侧创建最深的阴影。
**shadow-inner:** 此类用于在盒子的内侧创建阴影。
**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 盒影类的实用程序。

添加外部阴影

要在外侧部分创建盒子的阴影，我们可以使用 'shadow-sm'、'shadow'、'shadow-md'、'shadow-lg'、'shadow-xl' 或 'shadow-2xl' 实用程序类将不同大小的外部盒影应用于元素。

示例

Open Compiler

<!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' 类。

示例

Open Compiler

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

悬停时添加阴影

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

示例

Open Compiler

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

打印页面