shadow字面含义——阴影；text-shadow和box-shadow就是文本阴影和盒子阴影了。text-shadow和box-shadow都是CSS3新增属性。
text-shadow（文本阴影）目前市场上的所有主流浏览器都支持这个属性，IE的话得有10以上才支持。
主要是有四个属性值
那么首先来个小案例看看效果 // html部分<div class="text">text-shadow</div>// css部分.text{font-size: 30px;text-shadow: 5px 5px 5px red;}
效果图
可以看到在文本的右下角出现了像影子一样的阴影。此时的文本给人感觉就像是悬浮起来了一样。
有些时候会想要阴影在文本的四周均匀分布，那也很简单，只要不让文本阴影偏移就可以了，只需要设置text-shadow的前两个属性值都为0就可以了。
那又有些时候可能需要一些别(花)具(里)一(土豪的春天(哨)的感觉。比如想要文本四周都显示不同的阴影，怎么搞?
也很容易，设置阴影的时候不只是只能设置一个方向的阴影，意思就是可以在text-shadow后面写多个不同方向上的不同的阴影，怎么实现？看代码
为了更好的展示效果，我调大了阴影的偏移量。
效果图
可以明显的看到文本四周出现了不一样颜色的阴影，是不是非常别(花)具(里)一(土豪的春天(哨)。这也说明了文本设置阴影不一定只能设置一个阴影。
阴影的出现可以是动画性的,阴影加在hover后，设置transition属性
看效果
盒子阴影的属性值比文本阴影的属性值多两个
阴影水平偏移值阴影垂直偏移值阴影模糊值半径阴影外延值（可以不写）阴影的颜色属性值固定inset。定义元素的阴影类型为内阴影，默认不写就是外阴影此属性在IE9以上支持,主流浏览器都支持
老规矩，先来打个样
// html部分<div class="box"></div>// css部分.box{width: 100px;height: 100px;margin: 30px;background-color: blue;box-shadow: 5px 5px 5px red;}此时在横向上纵向上都设置了一定的偏移量，看效果
阴影处于盒子的左下方，此处第三个模糊值可以不用设置，不设置就是没有毛边，没有这种阴影的感觉，不设置这个没多大用处。
想要阴影在盒子四周展示和text-shadow一样，偏移量都设置为0就可以了，这里就不多写无用代码了。
再来看看他的另外两个值加上去之后的效果
可以看到原本没有毛边的蓝色盒子现在有了毛边，这就可以验证是向内的阴影，10px就是阴影的扩散值。直白点解释就是给阴影加宽，并且这个宽不算在阴影的过渡内。
那么既然text-shadow能设置四周不一样的阴影那么box-shadow肯定也是可以的，text-shadow能哟动画性，box-shadow也是可以的，代码都是一样，这里就不写上来了。
关于这两个属性要注意的地方其实没什么，主要一点就是不要搞混了，前两天写一个进度条上面小圆点的阴影，加上阴影后就是不显示，没有阴影效果，我在那找半天，最后发现设置成了text-shadow。通过这个案例，希望大家引以为戒，不要像我这个憨憨一样。这么低级的错误。但是也总结出来了 ，如果你的阴影没有效果，不妨先看看是不是设置错了属性。