CSS3 Shadows浏览器支持情况
text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处：
box-shadow语法：
CSS Code复制内容到剪贴板
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
text-shadow语法：
CSS Code复制内容到剪贴板
text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
这里只有几个不同点：
不能为文本创建一个内阴影
有文字阴影没有扩散距离
但是可以创建多个阴影（显示在彼此的顶部）。
text-shadow学习
color 和 offsets
在下面的例子中，我们定义了水平和垂直偏移和自定义颜色
CSS Code复制内容到剪贴板
text-shadow:10px 10px;
text-shadow:-5px -5px; color:blue;
text-shadow:-1px -1px white; color:blue; background:#888;
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;
注意，正值使阴影往右/下移动，负值往左/上移动
阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能会有所不同，所以我建议定义颜色项（RGB或RGBA和HSLA等）。
blur
在下面的例子中，我们定义了各种模糊：
模糊是可选的参数，它定义了距离模糊。它应该是一个正数（因为0意味着没有模糊）。下面的图片，说明它是如何工作的：
CSS Code复制内容到剪贴板
element {
text-shadow:5px 5px 3px darkred; color:red;
}
element {
text-shadow:4px -4px 10px red;
color:azure;
background:#333;
}
element {
text-shadow:0px 0px 4px ;
}
parent {
color:red;
}
element {
