1. 前言
利用CSS3新增的text-shadow屬性可以生成文本陰影，在HTML文檔中實現火焰特效、發光特效、凸起和鑲嵌特效、描邊特效的藝術字效果，大大提高開發效率，無需鏈接圖片文件，節約帶寬。
2. text-shadow屬性介紹
2.1 語法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默認值：none
適用於：所有元素
繼承性：有
動畫性：是
計算值：1個顏色加3個絕對長度
2.2 取值：
none： 無陰影
<length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以爲負值
<length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以爲負值
<length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<color>： 設置對象的陰影的顏色。
2.3 說明：
設置或檢索對象中文本的文字是否有陰影及模糊效果。參閱 <’ box-shadow '> 屬性。
可以設定多組效果，每組參數值以逗號分隔。
2.4 兼容性：
被所有主流瀏覽器支持，除了IE9及以下和Firefox2.0-3.0
3. 藝術字設計
下面開始正題-------------------------------------------------------------------------------------------------
3.1 🔥🔥🔥火焰特效🔥🔥🔥
先上效果圖：
火焰的特點：燃燒的中心是白色，然後向外擴散逐漸變爲黃色然後變爲橙色。就像這樣：🔥。
text-shadow可以設定多組效果，每組參數值以逗號分隔。藉助這一特性，在藝術字上方添加多重陰影，顏色按照火焰的特點進行變化，並且越往上擴散效果應越明顯，且應左右擺動，使火焰效果更明顯。
源代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {background:#000;} /*背景設爲黑色*/
p {
text-align: center;
font:bold 60px helvetica, arial, sans-serif;
color: red; /*字體設爲紅色*/
text-shadow: 0 0 4px white, /*第一層陰影爲白色*/
0 -5px 4px #ff3, /*第二層陰影爲黃色*/
2px -10px 6px #fd3, /*第三層陰影爲淺橙色*/
-2px -15px 11px #f80, /*第四層陰影爲深橙色*/
2px -25px 18px #f20; /*最後一層陰影爲紅色，擴散效果設置較明顯*/
}
</style>
</head>
<body>
<p>文本陰影：text-shadow</p>
</body>
</html>
3.2 凸起效果
先上效果圖：
原理是在文字的左上和右下各添加一深一淺的兩個陰影，同時加深字體顏色，使文字呈現一種立體效果，就像光從左上方射過來，在右下方生成陰影，使文字有一種立體感。
源代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { background: #000; }
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #A2A2A2; /*加深字體顏色*/
background: #CCC;
text-shadow: -1px -1px white, /*白邊*/
1px 1px #333; /*深灰邊*/
}
</style>
</head>
<body>
<p>文本陰影：text-shadow</p>
</body>
</html>