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语法：

text-shadow语法：

这里只有几个不同点：

    不能为文本创建一个内阴影
    有文字阴影没有扩散距离

但是可以创建多个阴影（显示在彼此的顶部）。

text-shadow学习
color 和 offsets

在下面的例子中，我们定义了水平和垂直偏移和自定义颜色

注意，正值使阴影往右/下移动，负值往左/上移动

阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能会有所不同，所以我建议定义颜色项（RGB或RGBA和HSLA等）。

blur

在下面的例子中，我们定义了各种模糊：

模糊是可选的参数，它定义了距离模糊。它应该是一个正数（因为0意味着没有模糊）。下面的图片，说明它是如何工作的：

第一个例子使用不同的模糊距离，最后两个例子我们不设置颜色，但采用不同的颜色和背景色的父级。

Expansion 和 contraction

与box-shadow类似，spread 属性将要在css4中要添加。目前，它得到了ie10（可能是更现代的浏览器）的支持。这是text-shadow的第四个参数。你可以使用这个参数的扩大、缩小阴影。

正值扩大阴影，负值缩小阴影。零的值可用于给文本加边（第三例）。

多阴影

正如我们之前说的，你可以给文字加多个阴影：

简单的加边例子：

运行效果：

已经说过“spread”是css4的属性），但是你仍然用CSS3模拟：

例子：

Twin shadow

Letter-press

text-shadow: 0px 2px 3px #555;
background-color:#333;

Rainbow

3D

Retro / Vintage

First-letter-only shadow