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');    */       

  基礎練習：(借鑑字體形式展現)

  1、常見形式：

   <style type="text/css">
        .pubdemo{ width: 320px; margin: 20px; padding:20px; font: bold 50px/100% "微軟雅黑"; border:1px solid red}
        .demo1{ text-shadow: 0px 0 8px #F00}          .demo2{ text-shadow: 5px 5px 8px #F00}

        .demo3{ text-shadow: -5px -5px 8px #F00}
        .demo4{ filter:shadow(Color=#f00000,Direction=45,Strength=8);}
   </style>

   <!--一、沒有給其X軸與Y軸設置值 所在會在自己發生做用   模糊半徑範圍，顏色-->
      <p class="pubdemo demo1">text-shadow</p>

     

 

　<!--二、 X軸與Y軸改變了正值（正值 向右 向下） 因此變成了這樣‍-->
       <p class="pubdemo demo2">text-shadow2</p>

     

 

  <!--三、 X軸與Y軸改變成了負值（負值 向左 向上） 因此變成了這樣-->‍ 
    <p class="pubdemo demo3">text-shadow3</p>

        

 

注意，正值使陰影往右/下移動，負值往左/上移動

 <!--四、 IE瀏覽器下-->‍

     <p class="pubdemo demo4">text-shadow3</p>

    

 

2、四個角（）陰影：

   <style type="text/css">
      *{ padding:0; margin:0}
      .pubjiao{ width: 350px; margin: 20px; font-size:20px; font-weight:bold; border:1px solid red }
      .pubjiao div{ float: left; width:140px; padding:10px; border:1px solid green}
  </style>
  <div class="pubjiao">

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

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

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

    右下角： text-shadow:4px -4px 1px green;
 </div>

   

 

3、多陰影----加邊例子（逗號隔開） 不明顯：

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

 

 

4、自定義陰影-根據我的喜愛因此製做

   一、相似於火焰

   <style type="text/css">
          .fire{ font-size:40px; font-weight:bold;  background:#000; text-align:center; padding:24px;   
              text-shadow:0 0 4px white,    
                                0 -5px 4px #ff3,   
                                3px -10px 6px #fd3,    
                                -3px -15px 11px #C90,   
                                3px -25px 18px #f20;
                         /* 4px -35px 28px #C30;*/
     }
  </style>
  <p class="pubsty fire">淡然</p>

  

 

 二、3D

      <p class="pubsty threeD">淡然</p>

       .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;
           }

     

 

 三、等等多種（後期在新增）......

 

 百變不離其宗，練習就能熟悉，懂了就知道原理,隨意改寫，在配合css3的動畫效果， 閃光層（字）都很簡單實現。。但願對你有幫助。。