html设置文本阴影可以使文字更加立体，为文本增加一定的视觉效果，HTML制作文本阴影有两种方法：
1、使用CSS实现：
使用CSS3的text-shadow属性可以让文本具有阴影，语法如下：
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;
其中，h-shadow是阴影的水平位置，v-shadow是阴影的垂直位置，blur-radius是阴影的模糊程度，color是阴影的颜色。
下面是一个简单的CSS文本阴影实例：
<style type="text/css">
.shadow{
text-shadow: 2px 2px 5px #ccc;
}
</style>
<h1 class="shadow">Hello World!</h1>2、使用SVG实现：
使用SVG可以实现更复杂的文字阴影效果，语法如下：
<svg>
<defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feMerge>
<feMergeNode in="offsetblur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="10" y="20" style="filter:url(#filter)">Hello World!</text>
</svg>这段代码比较复杂，这里简述一下用法，您可以调整参数来试试效果。以上代码主要使用了SVG中的滤镜特性。<defs>标签用于定义过滤器(filter)，id=”filter”用于设置过滤器的名称，<feGaussianBlur>标签表示高斯模糊，in属性设置模糊的输入源，stdDeviation属性表示模糊的程度，<feOffset>标签表示偏移，dx和dy属性表示偏移的距离，result属性表示偏移后的结果，<feMerge>标签表示合并，<feMergeNode>表示合并的节点，in属性表示合并的输入源，最后<text>标签表示文本，x和y决定了文本在SVG图像中的位置，x=10，y=20，表示文本的左上角位于SVG图像的10像素处，20像素处；style属性用于应用上面定义的滤镜，其中”url(#filter)”表示使用id为filter的滤镜。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.shadow{
text-shadow: 5px 8px 6px darkgreen;
}
</style>
<body>
<div style="width: 500px;margin-top: 100px;margin-left: 200px">
<h1 class="shadow">Hello World!</h1>
<svg>
<defs>
<filter id="filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feMerge>
<feMergeNode in="offsetblur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="10" y="20" style="filter:url(#filter)">Hello World!</text>
</svg>
</div>
</body>
</html>效果图：
正文完