CSS3 text-shadow语法规则及上下左右文字阴影实例
CSS3 不但增加了区块阴影 box-shadow，还增加了文字阴影 text-shadow，它们的语法规则和取值都差不多，只是文字阴影没有外延值，也不能设置内阴影。
改变 text-shadow 的偏移量，可以给文字设置上下左右阴影。另外，text-shadow 也可以设置多组值，使文字呈现不同色彩的阴影效果，甚至能制作出艺术文字效果，如火焰文字，使原本只能用图片制作的文字阴影效果直接用CSS就能实现，简单方便了许多。下面先看 text-shadow 的语法规则，再看其上下左右文字阴影的具体实例。
一、text-shadow 语法规则
text-shadow: none | <shadow> [, <shadow> * ]
<shadow> = <length>{2,3} && <color>?
二、语法规则说明
1、text-shadow 可设置多组效果，每组可使用不同的颜色：
A、none：不设置阴影效果；
B、第一个<shadow>：设置第一组阴影效果；
[] 中的 <shadow>：设置第二组阴影效果，可以省略；
C、*表示可以设置多个 <shadow>，即设置多组阴影。
2、<shadow> 取值说明，shadow 共有两个参数，其意分别为：
A、length 设置文字阴影扩展范围和模糊程度，至少设置两个值，最多允许设置三个值；
length 第一个值：设置文字阴影水平偏移值，可取正负值；
length 第二个值：设置文字阴影垂直偏移值，可取正负值；
length 第三个值：设置文字阴影的模糊值，只能取正值；
B、color 表示设置阴影的颜色。
三、text-shadow 上下左右文字阴影实例
html代码：
<ul class="textShadow">
<li class="top-shadow">文字上阴影效果取值：text-shadow:3px -3px rgba(207,206,206,.6);</li>
<li class="bottom-shadow">文字下阴影模糊效果取值：text-shadow:1px 1px 2px rgba(230,6,185,.4);</li>
<li class="right-shadow">文字右阴影效果取值：text-shadow:2px 0px rgba(178,177,177,.9);</li>
<li class="left-shadow">文字左阴影效果取值：text-shadow:-1px 0px rgba(178,177,177,.9);</li>
<li class="group-shadow">文字多重阴影模糊效果取值：
text-shadow:
2px -2px 2px rgba(207,206,206,.6),
2px 0px 3px rgba(182,110,137,.9),
2px 0px 3px rgba(235,183,183,.7);</li>
</ul>
CSS代码：
<style type="text/css">
.textShadow li{margin-top:8px;list-style:none;width:600px;line-height:24px;}
.textShadow .top-shadow{text-shadow:3px -3px rgba(207,206,206,.6);}
.textShadow .right-shadow{text-shadow:2px 0px rgba(178,177,177,.9);}
.textShadow .bottom-shadow{text-shadow:1px 1px 2px rgba(230,6,185,.4);}
.textShadow .left-shadow{text-shadow:-3px 0px rgba(178,177,177,.9);}
.textShadow .group-shadow{
text-shadow:2px -2px 2px rgba(207,206,206,.6),
2px 0px 3px rgba(182,110,137,.9),
2px 0px 3px rgba(235,183,183,.7);
}
.none-shadow{text-shadow:none;}
</style>
效果图：
- 文字上阴影效果取值：text-shadow:3px -3px rgba(207,206,206,.6);
- 文字下阴影模糊效果取值：text-shadow:1px 1px 2px rgba(230,6,185,.4);
- 文字右阴影效果取值：text-shadow:2px 0px rgba(178,177,177,.9);
- 文字左阴影效果取值：text-shadow:-1px 0px rgba(178,177,177,.9);
- 文字多重阴影模糊效果取值：text-shadow:2px -2px 2px rgba(207,206,206,.6),2px 0px 3px rgba(182,110,137,.9),2px 0px 3px rgba(235,183,183,.7);