一：全部效果展示：
二：代碼展示：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background: #000;
text-align: center;
font-weight: bold;
font-size: 40px;
font-family: arial, sans-serif;
height: 80px;
line-height: 80px;
color: brown;
}
p {
background: #999;
text-align: center;
}
#fire {
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
#effect2 {
color: #fff;
background: #666;
text-shadow: #000000 0.1em 0.1em 0.2em;
}
#effect3 {
background: #fff;
text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
}
#effect4 {
color: #d1d1d1;
text-shadow: -1px -1px white,
1px 1px #333;
}
#effect5 {
color: #d1d1d1;
text-shadow: 1px 1px white,
-1px -1px #333;
}
#effect6 {
text-shadow: -1px 0 white,
0 1px white,
1px 0 white,
0 -1px white;
}
#effect7 {
color: #d1d1d1;
background: #ccc;
text-shadow: 0 0 0.2em #F87,
0 0 0.2em #F87;
}
</style>
</head>
<body>
<p>效果：1，火焰效果🔥</p>
<div id="fire">吳小迪</div>
<p>效果：2，增加前背景色後背景色</p>
<div id="effect2">吳小迪</div>
<p>效果：3，定義多色陰影</p>
<div id="effect3">吳小迪</div>
<p>效果：4，定義立體突出文字</p>
<div id="effect4">吳小迪</div>
<p>效果：5，定義立體凹入文字</p>
<div id="effect5">吳小迪</div>
<p>效果：6，定義描邊文字</p>
<div id="effect6">吳小迪</div>
<p>效果：7，定義外發光文字</p>
<div id="effect7">吳小迪</div>
</body>
</html>
三：代碼說明：
文本陰影的參數如下：
| 參數 | 描述 | 吳迪自己的理解 |
|---|---|---|
| h-shadow | 必需的，水平陰影的位置，可以負值 | 控制影子的x軸位置,正值則是在右邊，負值在左邊 |
| v-shadow | 必需的，垂直陰影的位置，可以負值 | 控制影子的y軸位置 ，正值則是在下面，負值在上面 |
| blur | 可選，模糊距離 | 控制影子的模糊度 |
| color | 可選，陰影顏色 | 控制影子的顏色 |
text-shadow屬性可以接受一個以逗號分割的陰影效果列表，並應用到該元素的文本上。陰影效果按照順序應用，因此他有可能出現互相覆蓋，但是他們永遠不會覆蓋文本本身。陰影效果不會改變框的尺寸，但有可能延伸到它的邊界之外。陰影效果的堆疊層次和元素本身的層次是一樣的。