基礎的文本陰影效果：
text-shadow:2px 2px 2px #fff X軸，Y軸，模糊程度(不可是負值)，陰影顏色
效果一：
text-shadow: 0 0 20px red;
效果二：
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
效果三：
text-shadow: 0 1px 1px #fff;
效果四：
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
效果五：
text-shadow: 0 0 5px #f96;
效果六：
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
效果七：
text-shadow: 1px 1px 0 #E4F1FF;
效果八：
text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;
效果九：
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),5px 5px rgba(197, 223, 248,0.8);
效果十：
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),-5px -5px rgba(197, 223, 248,0.8);
效果十一：
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; /*注意：第一個陰影色和背景色相同；文本前景色和第二個陰影色相同*/
效果十二：
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本陰影效果！</h1>
</body>
</html>所有主流瀏覽器都支持 text-shadow 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。
定義和用法
text-shadow 屬性向文本設置陰影。
| 默認值： | none |
|---|---|
| 繼承性： | yes |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.textShadow="2px 2px #ff0000" |
語法
text-shadow: h-shadow v-shadow blur color;
注釋：text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。
| 值 | 描述 | 測試 |
|---|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 | 測試 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 | 測試 |
| blur | 可選。模糊的距離。 | 測試 |
| color | 可選。陰影的顏色。參閱 CSS 顏色值。 | 測試 |