CSS Shadow

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: 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);}

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