今天我们将学习如何使用 CSS 的 box-shadow 属性来制作漂亮的网站组件。在此过程中，我们将创建一个按钮，并获得使用此属性的实践经验。让我们开始吧。🎖️

为什么你应该使用 CSS box-shadow 属性？

对小细节的关注将好的网站与外观精美的网站区分开来。如果你想将这些小细节添加到你的网站，你绝对应该将此属性与许多其他属性一起使用。

让我们举一些例子。👇

请密切注意上图中的按钮组件。你会看到我们有一些阴影。☝

让我们进一步检查这些按钮：👇

可以看出，后者看起来更具活力和趣味性，因为它更注重细节。这叫作投影效果。让我们看看如何在我们的代码中实现它。

项目设置

HTML

在 body 标签中写代码: 👇

<div class="box-1"> A Button </div>

CSS

清除你的浏览器默认设置：

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: sans-serif;
}

现在，我们用下面的代码创建一个按钮：👇

.box-1{
   margin: 100px 0 0 100px;
   height: 80px;
   width: 200px;
   border: 2px solid black;
   border-radius: 8px;
   font-size: 40px;

   display: grid;
   place-content: center;
}

好啦，现在我们开始写代码！

box-shadow 属性的语法

这是 box-shadow 属性的语法：👇

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

让我们更详细地看一下每个部分。

如何在 box-shadow 属性中使用 Offset-x

你将使用 offset-x 属性沿 X 轴向左和向右移动阴影。这是一个演示：👇

在你的 CSS 中编写以下代码：👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: -50px 0px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 50px 0px rgba(0,0,0,0.5);
}

如何在 box-shadow 属性中使用 Offset-y

你将使用 offset-y 属性沿 Y 轴上下移动阴影，例如：👇

请在你的 CSS 中写入以下内容：👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

如何结合 offset-x 和 offset-y

在你的 CSS 中写以下代码：👇

.box-1{
   box-shadow: 10px 10px rgba(0,0,0,0.5);
}

H这是按钮右侧和底部显示阴影的结果： 👇

如何在 box-shadow 属性中使用 blur-radius

blur-radius 属性会模糊按钮周围的颜色，就像这样：👇👇

代码如下：👇

/* offset-x | offset-y | blur-radius | color */

.box-1{
/* play around with 👇 this */
   box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

如何在 box-shadow 属性中使用 spread-radius

这个值在我们的按钮周围散布阴影，如下所示：👇

让我们使用以下 CSS 代码创建上面的效果：

/* offset-x | offset-y | blur-radius | spread-radius | color */

.box-1{
/*  play around with 👇 this */
   box-shadow: 0 0 0 50px rgba(0,0,0,0.5);
}

如何为按钮添加投影

让我们把上面学到的东西放在一起，为按钮添加投影效果：👇

.box-1{
   box-shadow: 8px 10px 10px 1px rgba(0,0,0,0.5);
}

效果如下：👇

其他资源

[GetCssScan] - 获得现成的阴影效果
[keyframes.app] - 实时测试和练习这些属性
flatuicolors - 漂亮的调色板

✨ 温馨提示✨

CSS box-shadow 属性中的 inset 是什么？

有一个名为 inset 的关键字，你可以将其与 box-shadow 属性一起使用。这会将阴影放在按钮内部，而不是将其散布在按钮外部。写这个 CSS 代码来试验一下：👇

.box-1{
   box-shadow: inset 8px 10px 10px 1px rgba(0,0,0,0.5);
}