CSS3属性text-shadow与box-shadow

序言

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后面写多个不同方向上的不同的阴影，怎么实现？看代码

.text{margin: 30px;font-size: 40px;text-shadow: 0px 10px 5px red,10px 0px 5px blue,0px -10px 5px yellow,-10px 0px 5px green;
}

为了更好的展示效果，我调大了阴影的偏移量。
效果图

可以明显的看到文本四周出现了不一样颜色的阴影，是不是非常别(花)具(里)一(胡)格(哨)。这也说明了文本设置阴影不一定只能设置一个阴影。
阴影的出现可以是动画性的,阴影加在hover后，设置transition属性

.text{margin: 30px;font-size: 40px;transition: all 0.8s;
}
.text:hover{text-shadow: 0px 10px 5px red,10px 0px 5px blue,0px -10px 5px yellow,-10px 0px 5px green;
}

看效果

box-shadow（盒子阴影）

盒子阴影的属性值比文本阴影的属性值多两个

阴影水平偏移值
阴影垂直偏移值
阴影模糊值半径
阴影外延值（可以不写）
阴影的颜色
属性值固定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就可以了，这里就不多写无用代码了。
再来看看他的另外两个值加上去之后的效果

.box{width: 100px;height: 100px;margin: 30px;background-color: blue;box-shadow: 5px 5px 5px 10px red inset;
}

可以看到原本没有毛边的蓝色盒子现在有了毛边，这就可以验证是向内的阴影，10px就是阴影的扩散值。直白点解释就是给阴影加宽，并且这个宽不算在阴影的过渡内。
那么既然text-shadow能设置四周不一样的阴影那么box-shadow肯定也是可以的，text-shadow能哟动画性，box-shadow也是可以的，代码都是一样，这里就不写上来了。

注意点

关于这两个属性要注意的地方其实没什么，主要一点就是不要搞混了，前两天写一个进度条上面小圆点的阴影，加上阴影后就是不显示，没有阴影效果，我在那找半天，最后发现设置成了text-shadow。通过这个案例，希望大家引以为戒，不要像我这个憨憨一样。这么低级的错误。但是也总结出来了，如果你的阴影没有效果，不妨先看看是不是设置错了属性。