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

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

             0 0 6px 6px #f0f,    
             0 0 4px 7px #fff,    
             0 0 3px 15px #222,    
             -4px 0 2px 9px #f0f,    
             4px 0 2px 9px #f0f,    
             0 -4px 2px 9px #f0f,    
             0 4px 2px 9px #f0f;   
color:white;  

CSS Code复制内容到剪贴板

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */  
color:magenta;  

运行效果:
2015723164502273.png (539×152)

已经说过“spread”是css4的属性),但是你仍然用CSS3模拟:

CSS Code复制内容到剪贴板

text-shadow: 0px 0px 0px 4px magenta;   
  
/* is similar to: */  
  
text-shadow: magenta 0px 2px,     
             magenta 2px 0px,     
             magenta -2px 0px,     
             magenta 0px -2px,     
             magenta -1.4px -1.4px,     
             magenta 1.4px 1.4px,     
             magenta 1.4px -1.4px,     
             magenta -1.4px 1.4px;  

例子:
Twin shadow
2015723164901851.png (517×76)

CSS Code复制内容到剪贴板

text-shadow: 0 0 2px 2px white,    
             2px 0 2px 5px #222,