css3 文本阴影

text-shadow

基本语法：

textshadow:none|< length>none|[ < shadow>,]*< shadow>
textshadow:none|< color>[,< color >]*

< length>: 表示由浮点数字和单位标识符组成的长度值，可为负值，指定阴影的水平延伸距离；
< color>：表示颜色。

//阴影位于左上角
p{text-shadow:-0.1em -0.1em #333};

//阴影位于左下角
p{text-shadow:-0.1em 0.1em #333};

//阴影位于右上角
p{text-shadow:0.1em -0.1em #333};

//阴影位于右下角
p{text-shadow:0.1em 0.1em #333};

text-shadow属性第一个值：表示水平位移（左负右正）；
text-shadow属性第二个值：表示垂直位移（上负下正）；
text-shadow属性第三个值：表示模糊半径（可选）；
text-shadow属性第四个值：表示颜色（可选）；

阴影效果

1.通过阴影增加前景色与背景色的对比度；

2.定义多色阴影；

text-shadow:0.2em 0.5em 0.1em #60;
    0.2em -0.5em 0.1em #60;
    -0.2em 0.5em 0.1em #60;

3.阴影可设置在文本线框外；

4.定义火焰文字；

text-shadow:0 0 4px white;
    0 -5px 4px #ff3
    2px -10px 6px #fd3;
    -2px -15px 11px #f80;
    2px -25px 18px #f20;

5.定义立体文字；

//凸起
text-shadow:-1px -1px #fff;
    1px 1px #333;

//下凹
text-shadow:1px 1px #fff;
    -1px -1px #333;

6.定义描边文字；

text-shadow:-1px 0 #000;
    1px 0 #000;
    0 1px #000;
    0 -1px #000;

7.定义外发光文字；