[转]常用的CSS3文字特效

PS：请使用支持CSS3的浏览器，如Chrome、Firefox3.5+、Safari4+、Opera

文字阴影 text-shadow
text-shadow是最为简单及常用的效果，而且有很多变换，这里列举一些有代表性的：
1.普通：
.text-shadow{ text-shadow:1px 1px 2px #2c5103; color:#60ad0d; }
Here is some text effect

2.3D：
.text-3d{text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color:#fff; background:#3699f6;
}
Here is some text effect

4.外发光：
.text-light{ text-shadow:0 0 20px #ff6600; color:#fff; background:#333; }
Here is some text effect

5.模糊：
.text-blur{ text-shadow:0 0 10px #fff; color:transparent; background:#333;}
Here is some text effect

6.凹痕：
.text-indent{text-shadow: 0 1px 1px #FFF; color: #717171; background:#d3d3d3;}
Here is some text effect

7.浮雕：
.text-carve{ text-shadow: -1px -1px #fff, 1px 1px #333; color: #CCC; background:#d3d3d3;}
Here is some text effect

结合其他CSS3样式做出的文字效果：
内阴影：
这里用到了背景剪切，想了解更多请看这里 background-clip
.text-inner-shadow{ background: #666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow:rgba(255,255,255,0.5) 0px 3px 3px;}
Here is some text effect

改变文字选取的默认颜色
用到了伪元素 ::selection
p.orange::selection { background:#ff6600; color:#fff;}

用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果，用鼠标选取这段文字就可以看到效果。

重叠文字
这里用了个伪类形成重叠的文字，注意伪类中content: attr(title)，直接取的title值。
彩蛋：用红蓝眼镜看的话会有立体效果哦~(文字的颜色是根据自己的一副红蓝眼镜调配的，不知道适不适用其他的，呵呵)
.text-overlap{ position: relative; font: 130px Helvetica, Sans-Serif; letter-spacing: -5px; color: rgba(0,255,240,0.5);}
.text-overlap:after{ content: attr(title); position: absolute; left: 10px; top: 5px; color: rgba(255,6,0,0.5);}

IInterest

原文链接：http://www.iinterest.net/2011/06/25/css3-text-effect/