效果：http://hovertree.com/texiao/css3/1/
本效果主要使用text-shadow实现.
参考：http://hovertree.com/h/bjaf/css3_text_effect.htm
代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title><link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" /></head><body><!--For Firefox--><style>a{color:blue}.test:after {filter: url(#light-top);}.dilate:before {filter: url(#dilate10);}.dilate:after {filter: url(#dilate6);}.erode:after {filter: url(#erode2);}.distant1:after {filter: url(#distant1);}.distant-top:after {filter: url(#distant-top);}.distant-front:after {filter: url(#distant-front);}.diff1 {filter: url(#diff1);}.bevel, .bevel:after {filter: url(#light2);}</style><h1 class='outlinedA'>OutlinedA</h1><h1 class='outlinedA mid'>OutlinedA</h1><div><a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a></div><h1 class='outlinedB'>OutlinedB</h1><h1 class='hsl'>Hsl Colors</h1><h1 class='test'>Test</h1><h1 class='bottom'>Bottom Light</h1><h1 class='dilate'>Dilate</h1><h1 class='erode'>Erode</h1><h1 class='distant1'>Distant Light</h1><h1 class='distant-top'>Distant Top</h1><h1 class='distant-front'>Distant Front</h1><h1 class='diff1'>Diffused Light</h1><h1 class='bevel'>Bevel</h1><h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1><h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1></body></html>参考：
- 你需要知道的三个CSS技巧
- 纯CSS3邮件、旗帜、音乐、文件和眼睛的...
- CSS热门知识点总结
- 井号后带三位数字或者字母表示的颜色
- css3改变选择文本背景颜色
- CSS3实现背景颜色渐变
- pre强制换行代码
- 纯CSS3漂亮的房子不错的天气
- CSS3径向渐变旋转的圆球
- css3 transition属性实现3d动画效果
- css3 3d展示中rotate（）介绍与简单实...
- CSS学习笔记之定位position属性
- CSS选择器多样应用
- css8种选择器详解
- CSS3的text-overflow
- CSS3女神图片旋转木马
- 用CSS让文字居于div的底部
- CSS transform中的rotate的旋转中心
- css3给div加阴影
- css强制换行
- WEB前端面试题
- CSS3画圆
- CSS怎样取消两个块状元素之间空隙
- 使用CSS实现图片磨砂玻璃效果
- 使用CSS在移动端禁用长按选中文本功能
- a:link,a:visited,a:hover,a:active
- 多种方法用 css-实现元素垂直居中对齐
- CSS3鼠标悬停360度旋转效果
- CSS导入使用及引用的两种方法
- 使用DIV+CSS开发一个简单漂亮的登录页...
- css hover鼠标悬停图片显示标注
- CSS3立体3D文字样式
- CSS3的background-size: cover;
- css3鼠标悬停(hover)打开打火机代码
更多：http://www.cnblogs.com/roucheng/p/texiao.html
原标题：纯css3艺术文字样式效果代码
关键词：CSS
我知道了 