今天总结一下文字特效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