对于火焰字效果，大多数小伙伴首先想到的是实用Photoshop来制作。实际上，我们使用CSS3的text-shadow属性同样可以实现。

举例：火焰字效果

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            text-align:center;
            color:#45B823;
            padding:20px 0 0 20px;
            background-color:#FFF;
            font-size:60px;
            font-weight:bold;
            text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这就是使用text-shadow属性实现的火焰字效果！相信小伙伴们再次为CSS3所折服了吧！没想到CSS3已经强大到这个地步了。

实际上，实现火焰字效果原理很简单：text-shadow属性取值是一个值列表，但是，这些颜色和模糊半径等的取值需要我们细心地一点点测试才能做出来，所以也会比较费时间。