text-shadow

版本： CSS3

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

浏览器支持

IE10以上版本，以及其他浏览器都支持 text-shadow

语法:

text-shadow : h-shadow v-shadow blur color ;

• color ：可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。
• offset-x offset-y ：必选。这些长度值指定阴影相对文字的偏移量。 offset-x 指定水平偏移量，若是负值则阴影位于文字左边。 offset-y 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了 则会产生模糊效果)。可用单位请查看 length 。
• blur-radius ：可选。这是 length 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
• 注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。 参阅 box-shadow 属性。

• 可以设定多组效果，每组参数值以逗号分隔。
• 对应的脚本特性为 textShadow 。

实例

<style>
.demo{
 background: #666666;
 width: 440px;
 padding: 30px;
 font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
 color: #fff;
 text-transform: uppercase;      
}
.demo .item{text-shadow:0 1px 0 red;}
</style>
<div class="demo">
	<p class="item">TEXT-SHADOW</p>
</div>

<style>
.demo 
{

      background: #666666;
      width: 440px;
      padding: 30px;
      font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
      color: #ccc;
  
}
.demo .item2{text-shadow:-1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

</style>
<div class="demo">
	<p class="item2">TEXT-SHADOW</p>
</div>