box-shadow 是个啥呀？咋用呀？

来吧，让小白带你走上歧途！

现在的网页越来越炫酷了，特别是 CSS3 时代来临之后，仅仅只用 CSS 代码就能写出非常带感的页面。在 CSS3 的一众新特性中，box-shadow 是极为重要的属性，它能为你页面内的某些元素增加阴影效果，使之产生立体感，绝对是页面美化的重要手段之一。

下面，我们就来简单探讨一下 box-shadow 属性。

是什么

首先要知道 box-shadow 是什么。

在 MDN 上，它的定义是这样的：

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。

简单来说，就是给你的页面元素加一个阴影效果，让它成为区别与其他元素的“妖艳贱货”。

怎么用

语法

先来看看 box-shadow 的语法：

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

下表是每个值的具体说明：

值	说明
offset-x	水平阴影的位置，允许负值，必需。
offset-y	垂直阴影的位置，允许负值，必需。
blur-radius	模糊距离，可选。
spread-radius	阴影大小，可选。
color	阴影颜色，可选。
inset	从外层的阴影（开始时）改变阴影内侧阴影，可选。

使用

了解过语法和每个值后，就来动手试试吧。

我用下面的代码构建了一个基本的方块，用于后面的所有实验，你也可以自己构建一个类似的。

<style>
    div {
        margin: 50px auto;
        width: 200px;
        height: 100px;
        border: 1px solid;
    }
</style>

<div></div>

基础实验

在 css 中加入下面这行代码：

1	box-shadow: 20px 20px grey; /* offset-x offset-y color */

于是，方块变成了下面这样

可以看到，在方块的 x 方向和 y 方向上均出现了灰色的区域，而这个区域似乎与方块的位置有密切的关系。这个区域，就是通过上面的代码得到的方块的阴影。

分析这个现象可以看出：

当 offset-x 值为 20px 时，阴影向右偏移了 20px 的距离；
当 offset-y 值为 20px 时，阴影向下偏移了 20px 的距离；
阴影的颜色就是 color 的值。

由此我们可以得出一个初步的结论，那就是方块的阴影是根据方块本身的位置，按照 offset-x 和 offset-y 的值进行偏移的。

负值实验

上一个实验中，我们用的都是正值，但 offset-x 和 offset-y 都是允许负值的，那么，如果使用负值的话，会是什么结果呢？

把代码换成下面的：

1	box-shadow: -20px -20px grey; /* offset-x offset-y color */

方块产生了如下的变化

可以看到，阴影的方向与之前的实验结果完全相反，原本出现在右下方的阴影现在出现在左上方。

由此，我们得到了这样一个结论：

阴影的位置是根据方块的位置偏移的。
根据 offset-x 的值不同，偏移的方向不同：当该值为正时，在 x 轴上向右偏移；当该值为负时，在 x 轴上向左偏移。
同理可得 offset-y 值的变化规律：当值为正时，在 y 轴上向下偏移，当值为负时，在 y 轴上向上偏移。

模糊实验

前面的语法说明中，有一个名为 blur-radius 的值，它有什么用呢？动手试一下：

1	box-shadow: 20px 20px 20px grey; /* offset-x offset-y blur-radius color */

增加了新的值后，产生了如下变化：

box-shadow_4

我们发现，阴影变得模糊了。那么，模糊的程度是不是和 blur-radius 正相关呢？改动代码如下：

1	box-shadow: 20px 20px 50px grey; /* offset-x offset-y blur-radius color */

于是，我们得到了新的结果，如下图：

box-shadow_5

没错了，blur-radius 的值越大，阴影越模糊。

阴影大小控制实验

在语法说明中，还有一个 spread-radius 值，它的解释是阴影大小。它所说的阴影大小和我们直观理解的阴影大小是不是一回事呢？动手试一下。

为了展现实验的最直观结果，我们去掉阴影模糊，同时 box-shadow 的值必需有一个书写顺序，所以我们把 blur-radius 设为 0，代码如下：

1	box-shadow: 20px 20px 0 20px grey; /* offset-x offset-y blur-radius spread-radius color */

改变代码后，我们得到了下面的结果：

box-shadow_6

根据结果，我们观察到两个现象：

阴影与方块在上端和左端实现了对齐，也就是说在横轴上向左延伸了 20px，在纵轴上向上延伸了 20px；
与基础实验的结果相比，明显看出阴影变宽了，肉眼可见的是宽度增加了一倍（实测结果也是这样），也就是说，阴影在横轴上向右延伸了 20px，在纵轴上向下延伸了 20px。

综合以上两个现象，可以得到一个结论，就是 spread-radius 会使阴影在各个方向上得到延伸，并且只要该值足够大，阴影就会包围方块（比如将本实验的值改成 30px，方块就会被阴影包围）。有兴趣的读者可以自行实验。

内侧阴影实验

语法说明中还有一个 inset 属性，直观上我并不理解 inset 能产生的效果，所以直接进入实验环节看看这个属性能带来什么改变。

更改基础实验的代码如下：

1	box-shadow: 20px 20px grey inset; /* offset-x offset-y color inset */

代码更改后得到如下结果：

box-shadow_7

对比基础实验的结果，发现三个有趣的现象：

基础实验中的阴影在方块外面，增加 inset 值后阴影跑到了方块里面；
基础实验中的阴影在方块的右下方，增加 inset 值后阴影跑到了方块的左上方；
基础实验中的阴影在横轴和纵轴上与方块均存在落差，增加 inset 值后阴影在方块里面没有显现出差值，方块的长宽是多少，阴影的长宽就是多少。

这就是 inset 值所带来的影响。该值可以对除了颜色外的其它所有值产生影响，特别是当阴影包围方块时，inset 值会产生很有趣的结果，留给读者自己尝试吧。

多条列表实验

根据 MDN 的定义我们知道，box-shadow 可以接受由逗号分开的多条列表，那么多条列表会产生什么效果呢？让我们来试试。

将基础实验的代码更改如下：

1	box-shadow: 20px 20px grey, -20px -20px grey;

得到的结果如下图

box-shadow_8

由实验我们可知，多条列表就是给一个元素增加多个阴影。

至于它能产生怎样的效果，就有待读者自己发掘了。

颜色

color 值和其它 CSS 属性的 color 值类似，可以使用关键字、十六位进制、rgb、rgba 等多种方式表达，不再具体阐述。

实验后总结

通过上面的5个小实验，我想读者对于 box-shadow 各个值的意义一定有了更深层次的理解。让我们重新对值的说明做一个简单的易于理解的解读：

值	说明
offset-x	控制阴影在横轴上的偏移，正值时向右偏移，负值时向左偏移。
offset-y	控制阴影在纵轴上的偏移，正值时向下偏移，负值时向上偏移。
blur-radius	控制阴影的模糊程度，值越大越模糊，不允许负值。
spread-radius	控制阴影在各个方向的延伸，值越大阴影越大，不允许负值。
color	控制阴影颜色。
inset	该属性会使阴影在除了颜色外的其它方面呈现完全相反的结果。

限于文字水平不足，希望读者能够理解我的意思，并作出更高层次的总结归纳。

一个小彩蛋

怎样做一个好看的四面模糊阴影效果呢？

1	box-shadow: 0 0 5px grey; /* offset-x offset-y blur-radius color */

box-shadow_9

以上！