前言：

css中用于设置阴影的属性有三个，分别是：box-shadow(盒子阴影)、text-shadow(文本阴影) 以及filter：drop-shadow，本篇文章着重介绍盒子阴影与文本阴影。

一、box-shadow(盒子阴影)

1、使用方式

box-shadow: (inset) h-shadow v-shadow blur spread color inset;

参数介绍：

• h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
• v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
• blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默认为0；
• spread：可选参数，阴影扩散半径，值越大阴影面积越大，可正可负，默认为0；
• color：可选参数，阴影颜色，默认为黑色；
• inset：可选参数，内阴影，一般放在开头或末尾

2、使用示例

定义一个div盒子模型：

盒子样式为：

div {     width: 500px;     height: 500px;     margin: 100px auto;     background-color: #dbdbdb; }

首先设置一个右移50px，下移50px的阴影：

.shade {     box-shadow: 50px 50px skyblue; }

运行结果如下：

我们对阴影进行一下更改，设置模糊半径与扩散半径为20px：

.shade {     box-shadow: 50px 50px 20px 20px skyblue; }

 再设置一下内阴影：

.shade {     box-shadow: 50px 50px 20px 20px skyblue inset; }

 设置inset内阴影的变化过程是怎样的呢？我们分以下几个步骤来解释：

（1）假设我们将阴影的水平和垂直位移，以及模糊、扩散半径都去除，即设定以下样式：

.shade {     box-shadow: 0px 0px 0px 0px skyblue inset; }

这个时候可想象为我们的div盒子覆盖在阴影之上，且阴影与盒子大小一致。

（2）我们设置阴影的扩散半径为20px：

.shade {     box-shadow: 0px 0px 0px 20px skyblue inset; }

这个时候相当于我们的div盒子会水平垂直居中在我们的阴影中。

（3）设置模糊半径为20px

.shade {     box-shadow: 0px 0px 20px 20px skyblue inset; }

这个时候阴影内侧会发生模糊，即我们的div盒子发生模糊。所以可以看成div盒子设置了20px的模糊半径。

（4）设置阴影的水平垂直位移都为50px

.shade {     box-shadow: 50px 50px 20px 20px skyblue inset; }

这个时候我们可以看成是div盒子在水平、垂直方向移动了50px 。

整个变化过程如下所示：

以上就是box-shadow的全部参数解析，我们现在利用box-shaodow属性来实现一些特别的效果。

3、实现案例

（1）实现特别图案：

我们将上述代码中的div盒子背景颜色删除，使之成为一个透明颜色的盒子，便会呈现以下效果：

由这个案例可知，box-shadow可以给同一个元素设置多个阴影效果，并用逗号进行分隔。

（2）实现类似立体盒子：

运行结果如下所示： 

 （3）实现内嵌盒子：

运行结果如下： 

 二、text-shadow(文本阴影)

1、使用方式

text-shadow: h-shadow v-shadow blur color;

参数介绍：

• h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
• v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
• blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默认为0；
• color：可选参数，阴影颜色，默认为黑色；

参数含义与box-shadow相同，因此这里不再对各参数进行详细解释。可看到text-shadow并没有内阴影和扩散半径。

2、实现案例

镂空发光文字案例：

                               
一角的努力—LXGeffort
   

上面代码首先对文本设置阴影，并将文本颜色设置与背景颜色一致，同时增加文本透明度，从而得到重影文本，再利用 -webkit-text-stroke 属性将文本进行描边处理，最后运行结果如下：