CSS 实现炫酷字体效果
一、css3 空心文字
空心字/缕空效果
效果如下：
空心字/缕空效果除了使用-webkit-text-stroke和-webkit-text-fill-color以外，我们还可以利用text-shadow。
空心字/缕空效果
或者：
空心字/缕空效果
二、css3立体文字
立体文字效果
效果如下：
立体文字效果立体效果原理：应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，从而达到一个立体的文字效果。
三、css3发光文字
发光文字效果
效果如下：
发光文字效果四、css3彩色文字
彩色渐变文字效果
效果如下：
彩色渐变文字效果
text的意思：就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。
五、css3浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果
text-shadow: 0 -1px 0 #123; 凹进效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果
六、css3纹理文字
文字纹理效果
纹理文字效果是依靠一张图片，配合其他文字效果制作出来，其原理来源于webkit-mask-image，把图片当作一个遮罩，叠合文字。