CSS3文本阴影、盒子阴影

在接触前端的时候，我们会接触各种各样的属性，今天我来跟大家讲解CSS中的文本阴影和盒子阴影。在大家往常看到的一些文字和图片有影子的，那就事所谓的阴影，接下来我为大家展示一下他们的效果：

文本阴影:text-shadow

文本阴影有四个值：text-shadow：0px 0px 0px color;
第一个值是阴影朝向水平的方向移动。（这个值是必须要有的，然且它还支持负值）
第二个值是阴影垂直方向移动的值，（也是必须要有的，也支持负值）
第三个值是阴影度数的值；越大就越模糊（不支持负值）
第四个则是阴影颜色值。

这是一个普通没有加阴影的正常文字

这是一个水平方向为两个像素，垂直方向为-6个像素，阴影程度为3像素，颜色为红色的，一个文本阴影。

这是一个水平方向为-14个像素，垂直方向为6个像素，阴影程度为3像素，颜色为红色的，一个文本阴影。

当然文字的阴影也可以为多个颜色这样可以使文字变得更加生动。这是一个水平方向为14个像素，垂直方向为6个像素，阴影程度为3像素，颜色为红色的，另外一个数值没有变化只是最后一个值的颜色换为了黄色的一个文本阴影。

 盒子阴影：box-shadow

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

这是一个没有阴影的盒子。

这是一个加了阴影的盒子，水平方向的阴影为7像素，垂直反向为7像素，模糊距离为24像素，阴影的大小是16像素，颜色为黑色。

这是一个加了内侧阴影的盒子，从视觉的角度就可以看出来他是在盒子的里面形成了阴影，所以我们就叫内阴影。这个属性值为：inset;

同样不止文本阴影可以设置多个颜色，盒子阴影也可以做到设置多个颜色，颜色为黑色跟黄色。

——逆战班