Css文字特效之text-shadow特效

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

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

1. /* css */
2. p{
3. width:300px;
4. margin:0 auto;
5. background:#e9e9e9;
6. padding:30px 0;
7. font-size:30px;
8. font-family:Arial, Helvetica, sans-serif;
9. font-weight:bold;
10. text-align:center;
11. }
12. .a1{
13. color:#fff;
14. text-shadow:0 0 5px #99FFFF,
15. 0 0 15px #99FFFF,
16. 0 0 25px #99FFFF;
17. }
18. .a2{
19. text-shadow:0 0 5px #30C;
20. color:transparent;
21. }
22. .a3{
23. text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;
24. }
25. .a4{
26. color:#fff;
27. text-shadow:1px 0px 0 #60F,
28. 0px 1px 0 #60F,
29. -1px 0px 0 #60F,
30. 0px -1px 0 #60F;
31. }
32. .a5{
33. color:#fff;
34. text-shadow:0px 1px 0 #000,
35. 0px 2px 0 #333,
36. 0px 3px 0 #060606,
37. 0px 4px 0 #020202,
38. 0px 5px 0 #252525,
39. 0px 6px 1px rgba(0,0,0,0.5),
40. 0px 5px 4px rgba(0,0,0,0.7),
41. 0px 2px 6px rgba(0,0,0,0.6);
42. }
43. <!--html-->
44. <div class="main">
45. <p class="a1">发光</p>
46. <p class="a2">模糊</p>
47. <p class="a3">浮雕</p>
48. <p class="a4">描边</p>
49. <p class="a5">立体</p>
50. </div>

文章来源：http://www.linzenews.com/program/web/2770.html