CSS Shadow 就是 CSS影（子）。
这个影（子）可以是投影，也可以是内阴影。通过合理的数值也可以做出来外发光和内发光的效果。

我们刚开始讲样式表的时候简单地讲过文本的投影。
这堂课我们将详细地介绍CSS的两种Shadow：
text-shadow （文本影子）
box-shadow （块状元素影子）
*为了说着顺口一些，在今后的讲述中都用阴影这一词吧。虽然阴影是shadow的一种。

text-shadow

文本的阴影。可以对文本添加一个或者多个阴影。如果要添加多个阴影，在每组阴影值中间用逗号分开即可。

语法：

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
翻译：text-shadow:水平偏移量 垂直偏移量 模糊半径 颜色|无颜色|不继承|继承;

示例:

h1 {
    text-shadow: 2px 2px 8px #FF0000;
}

多个阴影的语法：

每组阴影数值用逗号分开。如下示例：

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

box-shadow

向块状元素添加阴影。可以添加一个或者多个阴影。如果要添加多个阴影，在每组投影值中间用逗号分开即可。

语法：

box-shadow: none|h-shadow v-shadow blur spread color inset|initial|inherit;
翻译：box-shadow: 无|水平偏移量 垂直偏移量 模糊半径 扩散半径 颜色 内部设置|不继承|继承;

示例：

div {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset;
}

多个阴影的语法：

每组阴影数值用逗号分开。如下示例：

div {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset,  10px 4px 8px 0 rgba(255, 0, 0, 0.2);
}

语法就是这么简单。想要灵活运用还是要靠自己多试试。注意，一定要摸透语法。
 

相关英语

box = 盒子，箱子
shadow = 影子，阴影
blur = 模糊
spread = 扩散，散布
inset = 嵌入，凹边。这里是内置。