CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：

1) 不知道关于文本到底有哪些样式属性；

2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。

 

今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应用，也会做到熟练应用。

 

实例： 如何利用CSS3制作燃烧的字体？

 

以前，如果我们网页上想要显示一个燃烧着的文本，大家的第一反应就是找美工，让美工PS一张图。虽然可以做到，但是这却带来了一个局限性就是，如果想另一段文本也是同样的燃烧着的样式，那是不是又得去找美工呢？再者，多了一张图片，意味着必须多一次服务器请求，这也会对服务器产生一些影响。

 

CSS3出来之后，让程序猿非常惊喜，我们可以直接利用CSS3的样式属性text-shadow效果来实现同样的功能，再也不用去烦美工了。

 

首先，我先带着大家熟悉一下，在CSS3中，到底支持哪些关于文本方面的样式属性：

 

1.  要设置文本，最先想到的肯定就是字体相关的，比如我想要宋体，加粗样式的文本，其实这些就是指的是字体样式。

     CSS3中支持的字体样式如下表所示：

 

 

2. 当我们照着上面的样式设置了文字的基本样式，但是我现在想给一段文字设置下划线，或者让文字间的距离远一点，这又怎么做呢？

    下表为文本样式属性：

 

3.上面这些目前都是设置文字或文本的布局以及显示方式等，但是现在如果想让字体显示成彩色的，那又如何做呢？

    下面是CSS3中对文字颜色的处理增强:

 

通过上面的内容，我们已经对文本样式属性有一些基本了解了，现在正式进行今天的燃烧字体实例分解步骤之旅。

 

燃烧字体，主要是运用到了CSS样式中的text-shadow阴影效果来实现。

text-shadow属性，在CSS2中引入进来的，CSS3又重新定义了它，增加了模糊半径，这就给我们实现火焰效果提供了方便。

 

text-shadow语法如下:

通过它的语法，我们知道，如果我们不需要模糊效果和颜色，则可以写成 text-shadow:1px 1px； 这句话就是说，阴影是沿着x,y轴正方向偏移1像素的距离。

 

这里我要声明一下，颜色值的位置不一定放在后面，也可以放在前面，但是 偏移量和模糊半径的顺序不能改变。

 

 

好了，开始我们的代码之旅吧，先创建html页面，代码如下所示:

 

接着，我们在外部样式文件中，设置如下的样式代码(在样式中我已经将每一行意思加了注释)：

 

运行一下代码，燃烧着的文本效果就出来了。

 

 

利用text-shadow，我们也可以实现 文字凸出的效果或发光字体效果等等，大家可以开动脑经，试试看吧。

 

关于字体效果各种属性，我会在以后章节的实例里再给大家做更详细讲解。