CSS3 利用 text-shadow 实现凹凸文字效果

text-shadow 用于设置文本的阴影

text-shadow: 20px 27px 22px pink;

参数解释:水平位移 垂直位移 模糊程度 阴影颜色。

 

应用场景:实现凹凸文字效果

/* text-shadow 可以设置多个阴影,每个阴影之间使用逗号隔开*/
.tu {
     text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
     text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

给左上角放白色的阴影,右下角放黑色的阴影,就达到了凹下去的效果。

最终效果:

CSS3 利用 text-shadow 实现凹凸文字效果_第1张图片

全部代码:



  
    
    
    
    Document
    
  
  
    
凹凸特效
凹凸特效

 

你可能感兴趣的:(CSS,CSS,text-shadow,文本阴影,凹凸文字效果)