css3 text-shadow字体阴影讲解


 text-shadow:为字体添加阴影, 可以通过对text-shadow属性设置相关的属性值,来实现现一些需要的字体阴影效果,减少了图片的使用。

 
基础说明:
    text-shadow: X轴  Y轴  Rpx  color;
    属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色
    注(PS):此属性使用于文字阴影,而不是对盒模型进行操作   如果设置盒模型阴影请参考知识点:box-shadow(同理)

    IE下使用滤镜filter:shadow()
    和box-shadow一样都是css3新增的属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用text-shadow属性时,我们需要将属性的名称前面加上前缀 谷歌和苹果浏览器-webkit-text-shadow的形式。

                                                                                                                                            Firefox浏览器则需要写成-moz-text-shadow的形         欧朋浏览器  -o-text-shadow       IE>9  -ms-text-shadow   

  样例:

        -webkit-text-shadow:0 0 10px #c06;
           -moz-text-shadow:0 0 10px #C06;
               -o-text-shadow:0 0 10px #C06;
                    text-shadow:0 0 10px #c06;
        filter: Shadow(Color='green', Direction='135', Strength='6')/*Color设置阴影颜色  Direction阴影的方向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;   Strength就是 范围,类似于text-shadow中的模糊半径值*/
       /*  filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true');    */       

  基础练习:(借鉴字体形式展示)

  一、常见形式:

   

  
     

text-shadow

     

 

 
      

text-shadow2

     

 

  ‍ 
   

text-shadow3

        

 

注意,正值使阴影往右/下移动,负值往左/上移动

 

    

text-shadow3

    

 

二、四个角()阴影:

   
 

    左上角: text-shadow:-4px -4px 1px green;

    左下角: text-shadow:-4px 4px 1px green;

    右上角: text-shadow:4px -4px 1px green;

    右下角: text-shadow:4px -4px 1px green;
 

   

 

三、多阴影----加边例子(逗号隔开) 不明显:

   .kind1{ text-shadow: 0px 0px 2px green,
                     0px 0px 3px blue,
                     0px 0px 4px red;  
                     font-size:38px; color:yellow; }

 

 

四、自定义阴影-根据个人喜好所以制作

   1、类似于火焰

   
 

pubsty fire">淡然

  

 

 2、3D

     

pubsty threeD">淡然

       .threeD{ color:#fff;  text-shadow: 0 0 1px #999,
                                                      1px 1px 2px #888,
                                                      2px 2px 2px #777,
                                                      3px 3px 2px #666,
                                                      4px 4px 2px #555,
                                                      5px 5px 2px #333;
           }

     

 

 3、等等多种(后期在新增)......

 

 百变不离其宗,练习就能熟悉,懂了就知道原理,随意改写,在配合css3的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。

 

转载于:https://www.cnblogs.com/wuchuanlong/p/5985350.html

你可能感兴趣的:(css3 text-shadow字体阴影讲解)