如何在 html 和 css 中创建漂亮的盒子阴影

无论何时使用 HTML 设计卡片，框阴影对于使卡片脱颖而出都起着至关重要的作用。

无论是定价页卡还是电子商务产品列表卡，盒子阴影都会影响或破坏卡片的外观以及需要传达的整体信息。

今天，让我们了解如何制作漂亮的盒子阴影以及如何使它们脱颖而出。

理解 Box Shadow 语法

以下是框阴影的基本语法：

box-shadow: 1px 2px 3px 4px rgba(20,20,20,0.4);

上面的代码片段中有 5 个重要部分。让我们了解一下它们的含义：

1. 水平偏移： 1px 在上述示例中。这表示阴影在水平方向上与卡片的距离。正值表示向右，负值表示向左。
2. 垂直偏移： 2px 在上述示例中。这表示阴影在垂直方向上与卡片的距离。正值表示向下，负值表示向上。
3. 模糊： 3px 在上述示例中。这表示阴影看起来有多模糊。半径越大，模糊程度越高。
4. 扩散： 4px 在上述例子中。这表示阴影向各个方向扩散的距离。
5. 颜色： rgba(20,20,20,0.4) 在上述示例中。这决定了阴影的颜色。如果未提供，则将使用默认文本颜色。颜色值可以是 Hex、RGB 或 HSL。

让我们看看上面的代码的实际效果：

盒子阴影如何影响卡片

请考虑以下两个例子：

第一个例子没有盒子阴影，而第二个例子有盒子阴影。第二个例子似乎从屏幕中弹出（与第一个相比，这让它显得有点突出）。

因此，如果您需要让卡片脱颖而出，那么盒子阴影可以帮助您让它们真正脱颖而出。

假设您正在构建一个电子商务应用程序，并且希望您的产品卡脱颖而出。盒子阴影可以帮助您实现这一目标，并让您的客户注意到您的产品。

即使您的 Web 应用程序要求卡片更加精致，您也可以随时使用微妙的盒子阴影来为卡片带来更令人愉悦的美感。

如何使用多层盒子阴影

您可以在卡片中使用多层盒子阴影 - 而且您可能会经常这样做。

创建多层框阴影的语法如下：

box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;

每个单独的框阴影都用逗号 ( , ) 分隔。您可以根据需要添加任意数量，但我建议最多限制为 5 个。

上面的例子看起来像这样：

请注意卡片下方的 5 个层，它们的不透明度按降序排列。如果操作正确，它可以让您的卡片看起来完全不同。

现在，这张特定的卡片可能看起来并不完美，因为它旨在解释某个概念。但是，让我们通过为阴影添加颜色使其更有趣。

还记得我们讨论过使用 rgba() 语法添加颜色吗？让我们在这里使用它。

我没有使用表示颜色的 rgba(0,0,0,0,2) 值 rgba(240, 46, 170, 0.2) 按降序排列的不同不透明度。这是添加颜色的一种方法 - 限制在于您的想象力。

如何使用彩色框阴影

尽管颜色可以帮助您使卡片在视觉上脱颖而出，但它们并不总是最好的选择。有时，纯灰色阴影在白色背景上会产生奇效。但这完全取决于您网站的主题。

考虑一个简单的博客应用程序，其中包含大量空白和一般文本内容。如果您有一个显示网站上博客的卡片，最好的方法是向卡片添加一个简单但微妙的框阴影，以使其突出。

例如：考虑下面直接从我的 网站 ，其中我列出了迄今为止我为 撰写的所有博客。

我的网站很简单，只做一件事——展示我的个性和我所做的事情。如果我继续在上面的框中添加红色框阴影，效果可能不太好。但如果我使用灰色阴影和一定程度的模糊，它就会让它脱颖而出，而不会太过突兀。

那么如何正确使用它们呢？让我们看一个例子。

在上面的例子中：

• 背景颜色： rgb(251 113 133);
• 盒子阴影： box-shadow: rgba(254, 205, 211, 0.1) 0px 4px 16px, rgba(254,205,211,0.1) 0px 8px 24px, rgba(254,205,211, 0.1) 0px 16px 56px;

盒子阴影是上面示例中使用的背景颜色的浅色调。并且有三层阴影。

当我们有背景颜色时，通常最好使用比所用背景颜色更浅的彩色阴影。这看起来比纯白色或黑色阴影更好。

如何使用内阴影

上述所有示例都涵盖了我们试图设计卡片“外部”的阴影。但如果我们想在内部添加阴影怎么办？

如果您想在保存容器内有盒子阴影， inset 您可以使用

请考虑以下示例：

阴影的代码是：

box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

关键字 inset 用于指定我们要使用阴影 inwards ，而不是默认行为 outwards .

您可以巧妙地在需要显示一些重要信息的 Web 应用程序中使用向内的框阴影。例如井或您要显示的某些警报。在这种情况下，该项目似乎嵌入在网页内。

盒子阴影示例

创建盒子阴影很难，并不是因为它很难，而是因为它需要一些设计知识才能发挥出最佳效果。

我最近创建了一个应用程序，其中包含精心挑选的漂亮盒子阴影列表，可以帮助您的卡片脱颖而出。目前，该项目 在 ProductHunt 上排名第二 ，并正在帮助许多开发人员使他们的卡片变得美观而有效。

你可以在这里找到这个项目： Tailwind Box Shadows .

目前，您可以在 Vanilla CSS 和 Tailwind JIT 代码中找到框阴影。单击复制并粘贴即可完成。还有一个辅助实用程序可以将 CSS 框阴影转换为 Tailwind 框阴影。

结论

项目 projects 。这是我遇到过的最被低估的东西。好的盒子阴影布局确实可以改善应用程序的视觉效果。

如果您喜欢这篇文章，请尝试在您的应用程序中实现这些阴影，并让我知道它给您的应用程序带来了哪些变化。

和/或我的 Twitter 个人网站 联系我 .