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

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

  text-shadow:0px 0px 4px ;   
}   
parent {   
  color:lightgray;    
background:#333;   
}  

第一个例子使用不同的模糊距离,最后两个例子我们不设置颜色,但采用不同的颜色和背景色的父级。
Expansion 和 contraction

与box-shadow类似,spread 属性将要在css4中要添加。目前,它得到了ie10(可能是更现代的浏览器)的支持。这是text-shadow的第四个参数。你可以使用这个参数的扩大、缩小阴影。
2015723164406692.png (539×206)

CSS Code复制内容到剪贴板

text-shadow:5px 5px 0px 3px lightgreen; color:green;   
  
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;   
  
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;  

正值扩大阴影,负值缩小阴影。零的值可用于给文本加边(第三例)。
多阴影

正如我们之前说的,你可以给文字加多个阴影:
2015723164441608.png (539×356)

简单的加边例子:

CSS Code复制内容到剪贴板

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */  
  
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),   /* example 2 */  
             6px -6px 4px 2px rgba(255,255,255,0.25),     
             -3px -3px 4px 6px rgba(255,0,255,0.15);   
  
text-shadow: 0 0 0 3px white,   /* example 3: neon – 1 */  
             0 0 2px 6px magenta,    
             0 0 1px 9px white,    
             0 0 6px 12px magenta;   
color:magenta;   
  
text-shadow: 0 0 2px #fff,    /* example 4: neon 2 */  
             0 0 4px 2px rgba(255,255,255,0.5),