css3怎么添加文字陰影效果

這篇文章主要介紹css3怎么添加文字陰影效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

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

text-shadow是CSS樣式屬性單詞，是設(shè)置對象中文本的文字字體是否有陰影及模糊效果的CSS樣式。

text-shadow屬性：在CSS3中可以用text-shadow屬性給頁面上的文字添加陰影效果, 可以通過對text-shadow屬性設(shè)置相關(guān)的屬性值，來實現(xiàn)一些需要的字體陰影效果,減少了圖片的使用。

text-shadow屬性的語法：

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

可以看出text-shadow屬性可以設(shè)置4個參數(shù)，每個參數(shù)用空格隔開，下面我們來介紹一下這四個參數(shù)：

h-shadow： 設(shè)置水平陰影的位置（x軸方向），必需要設(shè)置的參數(shù)；允許負值。

v-shadow ： 設(shè)置垂直陰影的位置（y軸方向），必需要設(shè)置的參數(shù)，允許負值。

blur： 陰影模糊的距離（半徑大?。?，可選擇設(shè)置的參數(shù)。

color ： 陰影的顏色，可選擇設(shè)置的參數(shù)。

注釋：text-shadow 屬性可以向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規(guī)定。省略的長度是 0。

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

<h2>我是一段測試文字</h2>

h2{

   color:powderblue; /*設(shè)置文字顏色*/

   text-shadow: 2px 3px 1px pink;/*添加字體文字的陰影*/

}

1.jpg

我們再來看看如果不設(shè)置css3文字陰影效果會是怎樣的：

說明：

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

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

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

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

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

瀏覽器的支持：

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

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

以上是“css3怎么添加文字陰影效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！