DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3教程:網頁文字陰影屬性text-shadow
CSS3教程:網頁文字陰影屬性text-shadow
編輯:CSS進階教程     

文字陰影在很多設計中都有應用,在過去我們只能通過圖片來實現在Web上顯示文字陰影,但是這樣做對不太利於SEO,所以在CSS3中,text-shadow又恢復了其屬性(text-shadow屬性是CSS3中定義的,在CSS2.1中刪除了)。

text-shadow:

  此屬性有4個值,前兩個值分別表示水平方向位移距離和垂直方向的位移距離,第三個值表示陰影的模糊半徑(包含0及以下的值均表示無模糊),最後一個則是陰影的顏色,為了更方便大家理解次屬性的這四個值,W3Cfuns特意為大家做了下圖,雖比較簡單,但是能夠很清楚的理解這四個值。

<!DOCTYPE HTML>
 
<html>
 
    <head>
 
        <meta charset="gb2312">
 
        <title>CSS3教程:網頁文字陰影屬性text-shadow-網頁教學網poluoluo.com</title>
 
        <style type="text/css">
 
        *{margin:0; padding:0;}
 
                body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
 
                h2,p{text-shadow:-5px 5px 5px #dfdfdf;}
 
        </style>
 
    </head>
 
   
    <body>
 
        <h2>網頁教學網poluoluo.com!</h2>
 
        <p>網頁教學網提供最新的網頁制作、網頁設計、網頁特效,為個人網站提供網頁素材模板和網頁視頻學習!</p>
 
    </body>
 
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved