用CSS的text-shadow制作超炫文字效果全攻略

2020-05-05 07:28:47易采站长站整理

             3px 0 3px 6px #933,    
             5px 0 2px 14px #222,    
             6px 0 5px 16px #533;   
background-color:#222;   
color:white;  

Letter-press
2015723164922528.png (491×70)

text-shadow: 0px 2px 3px #555;
background-color:#333;

Rainbow
2015723164943059.png (494×81)

CSS Code复制内容到剪贴板

text-shadow: 0 0 2px 3px yellow,    
             0 0 2px 6px orange,    
             0 0 2px 9px red,    
             0 0 2px 12px lime,    
             0 0 2px 15px blue,    
             0 0 2px 18px violet;  

   
3D
2015723165001834.png (503×74)

CSS Code复制内容到剪贴板

text-shadow: 0 0 1px #999,    
             1px 1px 1px #888,    
             2px 2px 1px #777,    
             3px 3px 1px #666,    
             4px 4px 1px #555,    
             5px 5px 1px #444;   
background-color:#333;   
color:white;  

Retro / Vintage
2015723165021124.png (506×72)

CSS Code复制内容到剪贴板

text-shadow: 2px 2px #fff,    
             3px 3px #666;  

First-letter-only shadow