css3如何加入文字陰影效果？ text-shadow設定文字陰影效果

陰影效果是常見且實用的效果，相信有些朋友在使用陰影效果來美觀網頁頁面時，有時會有一些疑問，例如：字體文字陰影是怎樣設定的等等。那麼本章就來跟大家談談css3是如何設定字體文字陰影的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

其實在css3有一個很實用的屬性可以為字體文字加上陰影效果，那就是css3 text-shadow屬性。

那麼，我們先來詳細的看一看text-shadow屬性：

text-shadow是CSS樣式屬性單字，是設定物件中文字的文字字體是否有陰影及模糊效果的CSS樣式。

text-shadow屬性：在CSS3中可以用text-shadow屬性為頁面上的文字添加陰影效果, 可以透過對text-shadow屬性設定相關的屬性值，來實現一些需要的字體陰影效果,減少了圖片的使用。

text-shadow屬性的語法：

text-shadow: h-shadow v-shadow blur color;

可以看出text-shadow屬性可以設定4個參數，每個參數用空格隔開，下面我們來介紹這四個參數：

h-shadow：    設定水平陰影的位置（x軸方向），必需要設定的參數；允許負值。
v-shadow ：   設定垂直陰影的位置（y軸方向），必需要設定的參數，允許負值。
blur：    陰影模糊的距離（半徑大小），可選擇設定的參數。
color ：   陰影的顏色，可選擇設定的參數。  

註解：text-shadow 屬性可以為文字新增一個或多個陰影。此屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。

下面我們來看一個css3設定字體文字陰影的小例子，來具體的感知一下text-shadow屬性的用法：

<h1>我是一段测试文字</h1>

h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

效果圖：

我們再來看看如果不設定css3文字陰影效果會是怎麼樣的：

說明：

1、陰影的水平偏移（h-shadow）：可以取正值也可以取負值，如果值為正值，則陰影在物件的右邊，反之其值為負值時，陰影在物件的左邊。

2、陰影的垂直偏移（v-shadow ）：可以取正值也可以取負值，如果為正值，陰影在物件的底部，反之其值為負值時，陰影在物件的頂部。

3、陰影的模糊半徑：只能設定為正值。如果數值越大，陰影越模糊，反之陰影越清晰。若其值為0時，表示陰影不具有模糊效果。

4、陰影的顏色：當沒有指定顏色值的時候，瀏覽器會取預設色，但各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

說到瀏覽器的預設色不一樣，我們來看看text-shadow屬性在各個瀏覽器中是否支援：

瀏覽器的支援：

所有主流瀏覽器都支援text-shadow 屬性。

附註：Internet Explorer 9 以及更早版本的瀏覽器不支援 text-shadow 屬性。

以上是css3如何加入文字陰影效果？ text-shadow設定文字陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！