将 text-shadow 和 box-shadow 放一起将是因为两者都是CSS3新增的阴影属性，有很多想多参数，所以也就好比较它们之间的不同之处。
可能因为很多web设计中用到大量阴影，所以使 text-shadow 和 box-shadow 成为目前为止不用加浏览器前缀的CSS3属性。IE9已经以及其他现代浏览器都支持box-shadow，而 text-shadow 在IE9下竟然不支持。解下来我们来看看 text-shadow 和 box-shadow 它们俩的属性吧。
text-shadow 和 box-shadow阴影属性
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
/* text-shadow实际用法*/
text-shadow: 5px 5px 2px red;
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <<color>? ]
/* box-shadow实际用法*/
box-shadow:inset -5px 5px 5px 5px #ff0000;
从上我们发现text-shadow 和 box-shadow有共同的属性，而且它们的概念也是相同的，box-shadow还有比text-shadow多了表示内阴影和阴影外延值属性。好了，接下来我们来分别介绍他们吧。
text-shadow
- none：默认值。无阴影
- <length>①第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <color>：设置对象的阴影的颜色。
text-shadow代码以及DEMO：
.textShadow1{text-shadow:20px 13px 3px #000000;}
.textShadow2{text-shadow:-20px -13px 3px #000000;}
.textShadow3{text-shadow:0 -20px 3px #000000,20px 0 3px #000000,0 20px 3px #000,-20px 0 3px #000;}
DEMO
右下阴影
左上阴影
上下左右
全
看了以上DEMO我们知道阴影可以设定多组效果，每组参数值以逗号分隔，就能实现上下左右都有阴影效果，上下左右都有阴影有点像足球运动员比赛时被足球场四周的探照灯照射的影子一样:-D。
box-shadow
- inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
- <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
- <color>：设置对象的阴影的颜色。
box-shadow也可以设置多组阴影，跟text-shadow一样用逗号隔开。所以就不要DEMO了~，我们来比较内外阴影和外延值的差别。
.boxShadow1{box-shadow:10px 13px 3px red;}
.boxShadow2{box-shadow:10px 13px 3px 5px red;}
.boxShadow3{box-shadow:10px 13px 3px -5px red;}
.boxShadow4{box-shadow:inset 10px 13px 3px red;}
.boxShadow5{box-shadow:inset 10px 13px 3px 5px red;}
.boxShadow6{box-shadow:inset 10px 13px 3px -5px red;}
DEMO
box外阴影
box外阴影+外延值
box外阴影-外延值
box内阴影
box内阴影+外延值
box内阴影-外延值
除了以上作用，我们还可以用box-shadow来模仿元素border的效果，而且box-shadow不会影响页面的任何布局(使用firebug查看以上DEMO元素的layout视图)。