[转]常用的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/