文章目录
一：全部效果展示：
二：代码展示：
<!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属性可以接受一个以逗号分割的阴影效果列表，并应用到该元素的文本上。阴影效果按照顺序应用，因此他有可能出现互相覆盖，但是他们永远不会覆盖文本本身。阴影效果不会改变框的尺寸，但有可能延伸到它的边界之外。阴影效果的堆叠层次和元素本身的层次是一样的。
