css text-shadow 实现文字投影/描边/浮雕/发光效果
css3很多新特性值得我们去了解，一些我们惯常用图片制作出来的效果，也许用CSS3几行代码就能实现，正如本文介绍的，使用css text-shadow 属性，就能轻松实现文字投影/描边/浮雕/发光等效果。
话不多说，现在直接上代码，可点运行代码查看效果：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS Text Shadow</title>
<style>
h1 {
font-size: 80px;
}
.shadow1 {
color: red;
text-shadow: 5px 5px 5px #000;
}
.shadow2 {
color: white;
text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;
}
.shadow3 {
color: white;
text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;
}
.shadow4 {
color: white;
text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}
.shadow5 {
color: blue;
background-color:#949191;
text-shadow: 0px 0px 3px white, 0px 0px 5px white;
}
</style>
</head>
<body>
<h1 class="shadow1">文字的投影效果</h1>
<h1 class="shadow2">文字的描边效果</h1>
<h1 class="shadow3">文字的浮雕效果</h1>
<h1 class="shadow4">文字的剪纸效果</h1>
<h1 class="shadow5">文字的发光效果</h1>
</body>
</html>代码仅用了 CSS3 中的 text-shadow 属性，text-shadow 属性是用于向文本设置阴影的，可以向文本添加一个或多个阴影，用逗号分隔。
注意：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。
