CSS3属性之text-shadow

CSS3的text-shadow用来指定text的阴影效果，基本同border-shadow，包括用法及属性，这里简单的介绍下它的属性及如何使用，主要写一些DEMO，来看看一些特效文字的制作，另外，个人觉得，此属性也是CSS3中比较常用的属性之一。

属性名称：text-shadow

取值：none | [ <length>{2,3} && <color>? ]#   注：其中length分别为horizontal offset、vertical offset、blur distance（可选）

说明：

horizontal offset：阴影的水平偏移量。正值绘制的阴影向方框的右边偏移，负长度绘制的阴影向左边偏移。

vertical offset：垂直偏移量。正值将阴影向下偏移，负值将阴影向上偏移。

blur distance：模糊距离（可选）。不允许为负值。如果模糊值为 0，则阴影的边缘清晰。否则，值越大，阴影的边缘越模糊。

color：阴影的颜色，如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明，所以建议不要省略次参数。

兼容性：（来自http://caniuse.com）

从上图来看，此属性目前还是比较乐观的，除了ie8、9意外，现代基本都是支持的，并且不需要添加私有属性。

一些DEMO：

代码：

html

<div class="demo">
  <p class="demo1">TEXT-SHADOW</p>
  <p class="demo2">TEXT-SHADOW</p>
  <p class="demo3">TEXT-SHADOW</p>
  <p class="demo4">TEXT-SHADOW</p>
  <p class="demo5">TEXT-SHADOW</p>
  <p class="demo6">TEXT-SHADOW</p>
</div>

sass

.demo
  width: 500px
  height: 500px
  padding: 20px
  background: blue
  color: #fff
  font-size: 60px
  font-family: "微软雅黑"
  font-weight: bold
.demo1
  text-shadow: 5px 5px 5px black
.demo2
  text-shadow: 5px 5px 0 blue, 7px 7px 0 #fff
.demo3
  color: transparent
  text-shadow: 0 0 5px #fff
.demo4
  text-shadow: 1px 1px 0 red,-1px -1px 0 red
.demo5
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5), 2px 2px rgba(255, 255, 255, 0.5), 3px 3px rgba(255, 255, 255, 0.5), 4px 4px rgba(255, 255, 255, 0.5), 5px 5px rgba(255, 255, 255, 0.5)
.demo6
  color: rgba(255, 255, 255, 0.3)
  text-shadow: 3px 3px rgba(255, 255, 255, 0.5)

效果（从上到下DEMO1-DEMO6按顺序排列）：

总结：文字阴影这个属性，如果之前了解box-shadow，则会比较快的熟悉该属性，但是要制作出各种比较绚丽的字体，还需要多看实例，多写代码。