添加一个简单的阴影

让我们为投影准备一个简单的HTML元素：

然后添加CSS：

输出结果是三个框，通过调用每个框的ID可以很容易地放置阴影。要添加阴影，让我们将属性box-shadow赋予框1：

我们提供三个参数。前两个参数是offset-x和offset-y。两者都确定投影的位置。相对于元素左上角的位置给出偏移量。偏移x处的正值表示将阴影向右引导，偏移y处的正值表示将阴影向下引导。

第三个参数是所需的阴影颜色。尽管这里我们使用elements <div>，但是属性box-shadow可以应用于所有其他HTML元素。

赋予模糊半径

如果想要阴影看起来更逼真，则可以使用blur-radius参数。此参数将设置我们如何给予阴影模糊效果。让我们将其应用于方框2：

注意第三个参数，该值4px调整应用于投影的模糊半径。

如果要调整阴影的大小，我们可以添加参数spread-radius以使阴影扩大或缩小。让我们8px在框2中添加一个半径扩展：

注意参数的顺序。

我们甚至可以一次将多个阴影组合到一个元素中。让框3应用蓝色和绿色投影：

我们可以用参数制作一个向内的阴影inset。参数inset可以写在属性的开头或结尾box-shadow。以下示例使用elements blockquote。

我们还可以添加一些模糊和散布以增强阴影：

使用properties box-shadow，我们可以为所创建的网页提供阴影，从而可以提供良好的3D照明效果。