text-shadow文字特效

今天总结一下文字特效text-shadow，如果用好它可以做出各种不一样的效果，下图是我做出的几种效果。

怎么样，看起来很不错吧，下面贴代码。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

• /* css */

• p{

•     width:300px;

•     margin:0 auto;

•     background:#e9e9e9;

•     padding:30px 0;

•     font-size:30px;

•     font-family:Arial, Helvetica, sans-serif;

•     font-weight:bold;

•     text-align:center;

• }

•  

•  

• .a1{

•     color:#fff;

•     text-shadow:0 0 5px #99FFFF,

•                 0 0 15px #99FFFF,

•                 0 0 25px #99FFFF;

• }

•  

•  

• .a2{

•     text-shadow:0 0 5px #30C;

•     color:transparent;

• }

•  

•  

• .a3{

•     text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;

• }

•  

•  

• .a4{

•     color:#fff;

•     text-shadow:1px 0px 0 #60F,

•                 0px 1px 0 #60F,

•                 -1px 0px 0 #60F,

•                 0px -1px 0 #60F;

• }

•  

•  

• .a5{

•     color:#fff;

•     text-shadow:0px 1px 0 #000,

•                 0px 2px 0 #333,

•                 0px 3px 0 #060606,

•                 0px 4px 0 #020202,

•                 0px 5px 0 #252525,

•                 0px 6px 1px rgba(0,0,0,0.5),

•                 0px 5px 4px rgba(0,0,0,0.7),

•                 0px 2px 6px rgba(0,0,0,0.6);

• }

•  

•    <!--html-->

•     <div class="main">

•         <p class="a1">发光</p>

•         <p class="a2">模糊</p>

•         <p class="a3">浮雕</p>

•         <p class="a4">描边</p>

•         <p class="a5">立体</p>

•     </div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━