Css文字特效之text-shadow特效

Posted 2020-08-05

今天总结一下文字特效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.  
13.  
14. .a1{
15.     color:#fff;
16.     text-shadow:0 0 5px #99FFFF,
17.                 0 0 15px #99FFFF,
18.                 0 0 25px #99FFFF;
19. }
20.  
21.  
22. .a2{
23.     text-shadow:0 0 5px #30C;
24.     color:transparent;
25. }
26.  
27.  
28. .a3{
29.     text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;
30. }
31.  
32.  
33. .a4{
34.     color:#fff;
35.     text-shadow:1px 0px 0 #60F,
36.                 0px 1px 0 #60F,
37.                 -1px 0px 0 #60F,
38.                 0px -1px 0 #60F;
39. }
40.  
41.  
42. .a5{
43.     color:#fff;
44.     text-shadow:0px 1px 0 #000,
45.                 0px 2px 0 #333,
46.                 0px 3px 0 #060606,
47.                 0px 4px 0 #020202,
48.                 0px 5px 0 #252525,
49.                 0px 6px 1px rgba(0,0,0,0.5),
50.                 0px 5px 4px rgba(0,0,0,0.7),
51.                 0px 2px 6px rgba(0,0,0,0.6);
52. }
53.  
54. <!--html-->
55.     <div class="main">
56.         <p class="a1">发光</p>
57.         <p class="a2">模糊</p>
58.         <p class="a3">浮雕</p>
59.         <p class="a4">描边</p>
60.         <p class="a5">立体</p>
61.     </div>
62.  

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