HTML5學堂：CSS3文字陰影是給文字新增陰影效果，而在CSS3文字陰影在CSS以及存在了，只是CSS2.1的時候不用了，但是在CSS3又重新使用了，這是因為前端開發者對文字陰影開始重視了，使用更加廣泛了！而本章對CSS3文字陰影的講解希望對大家有幫助！謝謝~~

CSS3陰影的種類

可以分文字陰影和盒模型陰影。在最早做網頁的時候，陰影效果是沒辦法實現的，只能用圖片代替，現在有了CSS3的陰影屬性box-shadow以及text-shadow來實現陰影。這樣我們可以不需要圖片也可以實現陰影效果了，一方面能減少程式碼以及圖片的大小和數量，另一方面我們也能減少對圖片的請求。還有一點，在於陰影能夠很好的處理我們當前移動端上的一些問題。今天我們就來一起先看看文字陰影

文字陰影

text-shadow基本語法

text-shadow：none|shadow[,shadow]*
shadow=length{2,3}&&color?

預設值：none

語法分析：

none：無陰影

第1個長度值：陰影水平偏移值。可為負值

第2個長度值：陰影垂直偏移值。可為負值

第3個長度值：可選，陰影模糊值。不允許負值

color：設定物件的陰影的顏色。可以使用16進位制顏色值，也可以使用英文單詞，還可以採用rgba的表示法。

語法符號含義：

“[]”代表“可選”

“|”代表“或”

“{}”裡的數字代表屬性值的數量範圍

“？”代表“一次”

“*”表示可出現多次

CSS3文字陰影 應用

我們可以通過文字陰影實現“外發光”“火焰”“內陷”“立體”“鏤空”等各種效果。接下來我們就來舉幾個例子，實戰一下~

結構程式碼：

<div class="h5course">歡迎溝通交流~HTML5學堂</div>

描邊：

樣式程式碼：

html {
background: #000;
}
.h5course {
width: 400px;
height: 200px;
text-shadow: 1px 1px 0 #f96,
         -1px -1px 0 #f96;
background: #ccc;
line-height: 200px;
text-align: center;
font-size: 30px;
font-family: "微軟雅黑";


}
 

看效果圖：

描邊效果有時還是可以試用達到一種特殊的描邊效果，其主要運用兩個陰影，第一個向左上投影，而第二向右下投影，還需注意，製作描邊的陰影效果我們不使用模糊值。

外發光

樣式程式碼：

html {
background: #000;
}
.h5course {
width: 500px;
padding: 30px;
background: #333;
color: #000;
text-shadow: 0 0 20px #fff,
         0 0 50px #00f;
font-size: 40px;
font-weight: bold;
font-family: "微軟雅黑";
}

輝光效果，我們設定比較大的模糊半徑來增加其輝光效果，你可以改變不同的模糊半徑值來達到不同的效果，當然你也可以同時增加幾個不同的半徑值，創造多種不同的陰影效果。

內陷文字/文字內陰影特效

樣式程式碼：

.h5course {
width: 500px;
padding: 30px;
background: #333;
text-shadow: 0 1px 1px #fff;  
color: #000;
font-size: 40px;
font-weight: bold;
font-family: "微軟雅黑";
}

檢視效果：

內陰影的效果主要是運用文字顏色與背景顏色之間產生內陷的感覺，這裡一定要注意。模糊度一定要設定為0，否則沒有質感了。同樣我們可以改變不同的投光角度，從而製作不同效果。大家可以試試~

立體文字

樣式程式碼：

.h5course {
width: 500px;
padding: 30px;
background: #333;
color: #000;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),
         2px 2px rgba(197, 223, 248,0.8),
         3px 3px rgba(197, 223, 248,0.8),
         4px 4px rgba(197, 223, 248,0.8);
font-size: 40px;
font-weight: bold;
font-family: "微軟雅黑";
}

檢視效果：

實現立體文字的效果，需要使用多重陰影，向著同一個方向，進行疊加。需要注意的是，不同陰影之間，使用逗號分隔。另外，對於陰影，不建議採用模糊值，如果設定了模糊值，會導致立體感不足。

相容性:

IE8以及IE8以下版本瀏覽器不支援