text-shadow实现纯代码在网页中实现火焰字

--既然用到了text-shadow就先说说这个属性吧！先说一句，我开始学就是css3了，那么就得从为什么要用这个属性开始介绍咯！

一、text-shadow属性简介

在css3未出之前，如果想要在网页上实现一个非常漂亮的火焰字比如这个

那就需要设计师或者ps大牛去捣鼓好一会了！

在CSS2中，如果想要实现文字的阴影效果，工程师们一般都是靠着设计师使用Photoshop等来实现。但是在CSS3中，这种效果用一个text-shadow属性就能实现了。几句代码即可搞定，简单好用。

下面就简单说下text-shadow的属性和用法吧！

简单点，text-shadow属性有四个值！如：text-shadow:0px 0px 0px #fff;

说明：

第一个值（数值），是水平阴影，单位px就好，允许负值，如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；

第二个值（数值），是垂直阴影，单位px就好，允许负值，如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；

第三个值（数值），是模糊值，理解为放大值就好，即是同样像素的东西被放大了，那么就会变得越来越模糊，难以看清的意思，这个值不能为负值，我试过负值无效或者报错了

第四个值（颜色），你可以设置什么颜色就什么颜色咯！

1、一般文字影响效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小效果</title><style type="text/css">/*通配符重置浏览器默认的两个值，对本文没有太大影响，不知道可以无视*/*{margin: 0;padding: 0;}.div1{width: 500px;height: 100px;margin:20px auto 0;text-align: center;padding-top: 200px;font-size: 40px;font-weight: bold;font-family: "华文行楷";color:#E16008;background: #000;text-shadow: 3px 3px 0px #fff;}</style>
</head>
<body><div class="div1">超炫火焰字</div>
</body>
</html>

效果如图：

这只是一般的阴影效果

实现方式，就是通过为其添加3px的左和下偏移的白色阴影

如果我们改变将text-shadow: 3px 3px 0px #fff;改变成：text-shadow: 3px 3px 6px #fff;

效果如图：

这个就是模糊值变化的效果了

2、突出文字效果

如果我们先将代码改成下面这些

color:#fff;
text-shadow: -2px 0px 0px #00f,/*向左阴影*/0px -2px 0px #00f,/*向上阴影*/2px 0px 0px #0f0,/*向右阴影*/0px 2px 0px #0f0;/*向下阴影*/

效果如图：

出现了左边和上边是蓝色，右边和下边是绿色的阴影了，是不是觉得很炫酷呢？

二、text-shadow可以设定多个指定属性

在CSS3中，可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。

也就是说，text-shadow属性可以为一个以英文逗号隔开的“值列表”，如：

text-shadow: -2px 0px 0px #00f,/*向左阴影*/0px -2px 0px #00f,/*向上阴影*/2px 0px 0px #0f0,/*向右阴影*/0px 2px 0px #0f0;/*向下阴影*/

下面，我们使用text-shadow属性制作更为复杂的文本特效——火焰字。

将上面的第一个代码框里的text-shadow修改成下面的：

text-shadow: 0px 0px 2px #fff,0px -3px 3px #1EB,0px -6px 4px #01DEFD,0px -9px 5px #0BF,0px -12px 6px #08F;

效果如下：