text-shadow

语法：

text-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = <length>{2,3} && <color>?

默认值：none

适用于：所有元素

继承性：有

动画性：是

计算值：1个颜色加3个绝对长度

媒　体：视觉

取值：

none：
无阴影
<length>①：
第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：
设置对象的阴影的颜色。

说明：

定义文字是否有阴影及模糊效果。参阅box-shadow属性。
  • 可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果，Demo: 火焰文字 霓虹文字
  • 如果定义了多组阴影效果，它们的 z-ordering 和多个box-shadow规则相同，第一个阴影在最上面，以此类推。
  • 对应的脚本特性为：textShadow。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12-16 #1 2-3 4+ 3.1-3.2 #2 9 3.2+ 2.1+ 7 10+ 61 56 10-11 #1 11.4 4+ 1.2 7.12
10-11 #1 3.5+ 4+ 9.5+ 10
  1. IE 10+ 支持第四个<length>参数，阴影外延值。这目前不是W3C标准中的。
  2. Safari 3.* 不支持多重文字阴影
  3. IE5.5-9.0也可以使用滤镜来实现该效果: progid:DXImageTransform.Microsoft.DropShadow()或progid:DXImageTransform.Microsoft.Shadow()

示例：