CSS 框阴影教程：分步指南（+ 示例）

已发表: 2022-03-09

为什么box-shadow CSS 属性值得拥有自己的教程？ 因为，正如您将在下面看到的，它是同时采用多个值的更复杂的属性之一。 这对初学者来说可能特别具有挑战性。

如果到目前为止您一直在努力正确使用box-shadow ，那么您来对地方了。 在下面的指南中，我们将介绍有关此 CSS 属性的所有信息。 我们将讨论它的作用，如何正确使用它的语法，一些很酷的 CSS box-shadow示例，最后是一些使它更容易使用的生成器工具。

什么是 CSS 盒子阴影？

即使您直到现在还不知道 CSS box-shadow属性，您也可能已经在网络上看到了它。

css盒子阴影教程示例

上面是它在野外的样子的一个很好的例子（即使我在这里稍微增加了它以表明一点）。 box-shadow基本上就像名字所说的那样：它允许您向几乎任何元素的框架添加阴影。 阴影也会依附于其锚点的形状，无论是方形、矩形、圆形还是椭圆形。 当您设置了border-radius属性时，这甚至是正确的。

框阴影坚持锚元素形状示例

在网络上，人们使用它来创建许多不同的效果，我们将在下面看到一些有趣box-shadow示例。 现在，让我们谈谈它在最基本的层面上是如何工作的。

基本框阴影语法

当您使用浏览器开发工具查看带有框阴影的元素时，您会发现如下标记：

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

看起来有点复杂，对吧？

但请放心，您并不总是需要所有这些声明。 另外，一旦您了解了它们的工作原理，它就不再像开始时那样令人困惑。

正如你在上面看到的， box-shadow最多可以取六个值。 让我们一一介绍。

偏移量-x

第一个值是投影与其锚元素侧面的水平距离。 正值将其向右移动，负值向左移动。

您可以使用所有表示该值长度的常见 CSS 数据类型，例如px 、 em 、 vh等。 最常用的是px和em 。

偏移 x 示例

偏移-y

与上述相同，但对于垂直轴。 正值将阴影移动到元素下方，负值在上方移动。

偏移 y 示例

模糊半径

这定义了盒子阴影的模糊。 值越高，它就越模糊。 blur-radius也采用所有常见的 CSS 长度面额，但没有负值。

模糊半径示例

扩散半径

这个控制阴影的扩散超出其元素的高度或宽度。 长度越高，传播越大。 您也可以使用负数来引入收缩。

传播半径示例

颜色

正如您可能猜到的，这允许您以所有常用方式定义框阴影的颜色。 它最常以十六进制（例如#ededed ）或 rgba （例如rgba(46, 182, 142, 0.9) ）值表示。 后者还允许您控制不透明度，这通常用于投影。

盒子阴影颜色示例

注意，如果不设置颜色，浏览器将使用当前使用的文本颜色。

插图

最后，您可以选择在声明的开头添加inset 。 这会将阴影从投影更改为元素内部的阴影。 它出现在边框内，在背景之上，但在元素内容之下，因此它不会覆盖任何文本。

插入框阴影示例

按顺序使用值

这是box-shadow属性值出现的顺序。

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

要分配一个盒子阴影，您至少需要两个长度值。 浏览器将自动使用那些offset-x和offset-y 。 如果添加第三个，它将被解释为blur-radius ，第四个被解释为spread-radius 。 inset和color是可选的，可以以任何顺序出现在末尾或开头。 下面的 CSS 都将具有相同的结果。

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

指定多个盒子阴影

不是每个人都知道的是，您可以为同一个元素设置多个框阴影。 为此，只需提供一组以上的值并用逗号分隔它们。

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

上面的代码看起来像这样：

多个盒子阴影示例

您还可以使用它在元素周围创建线条。 为此，您只需添加几个不同颜色的阴影并将它们的偏移和模糊设置为零。

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

这会产生不同颜色的轮廓：

多个框阴影作为轮廓示例

请注意，这不会影响盒子模型的尺寸，因此盒子阴影不会像margin或border那样增加元素的整体大小。

浏览器兼容性

box-shadow的浏览器兼容性并不是您真正需要担心的事情。 这是一个非常成熟的 CSS 属性，几乎每个浏览器都接受，包括像inset和多重阴影这样的标记。

css box shadow 浏览器兼容性

为了支持某些浏览器的旧版本，通常包含具有相同值的-webkit-box-shadow和-moz-box-shadow属性。 但是，对于最常见的浏览器的最新版本，这不再是必需的。

CSS 盒子阴影示例

接下来，在这个box-shadow教程中，我们将介绍一些 CSS box shadows 的示例，以便您了解这个属性的可能性。 我们将从相当标准的应用程序转向更非凡的应用程序，因为正如您将看到的，您可以用它做一些非常令人兴奋的事情。

为按钮添加阴影

按钮通常是一个应用了盒子阴影的元素。 那是因为这是使它们在页面上脱颖而出的好方法。 毕竟，如果你包含一个按钮，你通常希望人们点击它。 为了提示他们这样做，这里有一个简单的例子，如何用盒子阴影做到这一点。

按钮示例的框阴影

随附的标记如下所示：

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

柔光箱阴影

如果你想创建一个相对柔和的 CSS 盒子阴影，你主要使用 blur 和 spread 并将 offsets 设置为0 。 这样，阴影不会得到明显的形状，而只会在边缘柔和地出现。

柔光箱阴影示例

要实现上述效果，可以使用以下标记：

 box-shadow: 0 0 50px 10px #999;

这也是在元素的所有侧面创建盒子阴影的好方法。 如果你想让它更明显，只需加快传播，淡化模糊，并使用更深的颜色。

多个盒子阴影

最后的box-shadow示例用于一次使用多个阴影。 这提供了不同的可能性。 首先，您可以引入一个很酷的褪色、多步框阴影。

多个淡入淡出的盒子阴影示例

它非常简单：您只需要将盒子阴影堆叠在一起，偏移量均匀增加，同时降低不透明度。 顺便说一句，当使用许多盒子阴影时，将声明写在单独的行中而不是一个长的声明中会有所帮助。 使它更容易理解。

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

您还可以通过在其间引入具有负spread-radius值的白框阴影来进一步实现这一点，从而产生多个元素相互叠加的错觉。

带有空格的多个框阴影示例

为什么是负点差值？ 因为否则白框阴影会覆盖它们下方的阴影。 负值会使它们缩小，以便后面的颜色可以透出来。 如果您想在自己的网站上引入类似的效果，以下是您需要的标记：

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

几个 CSS 盒子阴影的最后一个例子是前面提到的将偏移量和模糊设置为0的方法。 正如我们在上面看到的，它导致元素有几个轮廓，在这种情况下是彩色的。 然而，这只是因为每个盒子阴影的spread-radius值都会增加。

多个彩色 CSS 框阴影示例

如果您想自己尝试一下，可以从以下开始：

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

最好的盒子阴影发生器

正如我们所介绍的， box-shadow需要很多值。 因此，在你得到你想要的阴影之前，可能需要一些试验和错误。

为了使它更容易，有很多盒子阴影生成器工具可以让您使用它们的控件，立即查看结果，然后在满意后简单地复制标记。

css 框阴影生成器工具示例

以下是盒形阴影生成器的最佳选择：

  • box-shadow.dev — 这个单一用途的工具具有您需要的所有功能和最好的用户界面。 您可以使用inset ，创建多个框阴影，通过滑块控制偏移、模糊和散布，以及手动输入颜色。 满意后，单击显示代码以复制 CSS 标记。 唯一的缺点是它不为旧浏览器提供代码。
  • CSSmatic Box Shadow CSS Generator — 与上面类似。 允许您通过滑块控制box-shadow属性并手动输入数字。 有自己的不透明度控制，这很好。 另一方面，它缺少多个阴影的功能。 您获得的代码标记包括旧版浏览器。
  • Box Shadow CSS Generator - 一个可靠的选项，它还具有颜色选择功能，并为您提供旧浏览器的代码。 您只需单击即可复制它。 它具有不透明度控制，但只能创建一个阴影。
  • CSS3gen CSS3 Box Shadow Generator — 另一个投影生成器。 这里的一个很酷的功能是，您可以选择阴影角度和距离，而不是 x 和 y 偏移，其余的工具将自动完成。 由于某种原因， spread-radius和inset有自己的菜单。 您可以简单地复制和粘贴的 CSS 还包括旧版浏览器的标记。

最后的想法：CSS 盒子阴影

box-shadow属性一开始可能会让人不知所措。 它是那些需要很多值的属性之一，因此它看起来可能比实际更复杂。 希望这个 CSS box-shadow 教程能让这种感觉平静下来。

上面，我们已经了解了 CSS box-shadow是什么以及它是如何工作的。 我们已经解释了语法、值以及它们如何协同工作。 此外，我们还介绍了一些如何在现实生活中使用 CSS 盒子阴影的示例，包括您可以立即使用的标记。 最后，对于那些需要一点帮助的人，我们列出了一些 CSS box-shadow生成器，它们可以为您完成很多繁重的工作。

现在，您应该可以在您的网站上使用此 CSS 功能了。 我们期待看到你用它做什么。

你是如何在你的网站上使用 CSS 盒子阴影的？ 上面没有提到的任何令人兴奋的用例？ 在下面的评论中让我们知道！