文字阴影：text-shadow

在CSS2.1时代, 除非使用图片, 否则无法为文字添加阴影效果。在CSS3中, 通过 text-shadow 属性可以轻松的为文字添加阴影。

基本语法:

text-shadow: h-shadow v-shadow blur color;
h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 可选。模糊的距离。
color: 可选。阴影的颜色。

取值说明：

1. h-shadow: 阴影水平偏移量, 如果值为正值, 则阴影在对象的右边, 反之其值为负值时, 阴影在对象的左边;
2. v-shadow: 阴影的垂直偏移量, 如果为正值, 阴影在对象的底部, 反之其值为负值时, 阴影在对象的顶部;
3. blur: 阴影模糊半径, 此参数是可选, 但其值只能是为正值。值越大, 阴影越模糊, 反之阴影越清晰。如果其值为0时, 表示阴影不具有模糊效果。
4. color: 阴影颜色, 此参数可选, 如果不设定任何颜色时, 浏览器会取默认色, 但各浏览器默认色不一样, 特别是在webkit内核(safari, chrome)下将无色, 也就是透明, 建议不要省略此参数。

示例:

p{color:#f00;}
.p1{ text-shadow:5px 5px;}
.p2{ text-shadow:5px 5px #03f;}
.p3{ text-shadow:5px 5px 2px #03f;}
.p4{ text-shadow:-5px -5px #03f;}
.p5{ text-shadow:5px 5px orange,-5px -5px blue;}