标签：
效果：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>
参考：
更多：http://www.cnblogs.com/roucheng/p/texiao.html
标签：
原文地址：http://www.cnblogs.com/roucheng/p/yishuzi.html
