在CSS中阴影有两种，文字阴影和盒子阴影。下面会一一介绍。
一、文字阴影：text-shadow
text-shadow有五种取值为别是x,y,blur,color和多阴影，主要针对内联元素。在给一行文字不加任何阴影时是这样的，如下图：
接下来要给它加阴影：x与y就是文字阴影在水平和竖直方向上的偏移量，先看一下x有偏移量时候的情况：
如果把文字的颜色改变一下我们就会发现默认情况下文字阴影颜色和文字颜色相同：
再看一下y轴有偏移量时的情况：
blur是高斯模糊值，加上模糊就像阴影了，值越大，越模糊，如下：
color是阴影的颜色，给阴影颜色改成蓝色如下所示：
在添加多阴影的时候，每一个阴影之间需要用逗号隔开，效果如下：
二、盒子阴影box-shadow
添加在容器上，其值有x,y,blur,spread,color,inset和多阴影，其中x,y是盒子阴影的偏移量
当盒子阴影有偏移量时情况如下：
此时我们可以看到盒子阴影与文字阴影是有区别的，它们的区别就在于盒子阴影的颜色与盒子本身的颜色是没有关系的，默认阴影颜色就是黑色。
当有blur模糊程度时：
Spread是模糊的范围，就是把盒子阴影的范围扩大了，如下：
Color同样是盒子阴影的颜色：
inset是内阴影，outset是外阴影，就是默认值
由图可以看出，此时阴影就在盒子里面，但如果写上了outside阴影是不起作用的，如下图：
注：文字阴影与盒子阴影值是有顺序的，它的顺序决定了它的涵义
相关文章：