今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：
1) 不知道关于文本到底有哪些样式属性；
2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。
今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应用，也会做到熟练应用。
实例： 如何利用CSS3制作燃烧的字体？
以前，如果我们网页上想要显示一个燃烧着的文本，大家的第一反应就是找美工，让美工PS一张图。虽然可以做到，但是这却带来了一个局限性就是，如果想另一段文本也是同样的燃烧着的样式，那是不是又得去找美工呢？再者，多了一张图片，意味着必须多一次服务器请求，这也会对服务器产生一些影响。
CSS3出来之后，让程序猿非常惊喜，我们可以直接利用CSS3的样式属性text-shadow效果来实现同样的功能，再也不用去烦美工了。
首先，我先带着大家熟悉一下，在CSS3中，到底支持哪些关于文本方面的样式属性：
1. 要设置文本，最先想到的肯定就是字体相关的，比如我想要宋体，加粗样式的文本，其实这些就是指的是字体样式。
CSS3中支持的字体样式如下表所示：
| font-family | 字体 | 定义字体类型，也即使用什么字体 |
| font-style | 字体 | 定义字体的样式，如normal(默认值)、italic(斜体等) |
| font-variant | 字体 | 定义字体大小写。如normal(默认值)、small-caps(小型大写字母字体)等 |
| font-weight | 字体 | 定义字体粗细，如bold(粗体) |
| font-size | 字体 | 定义了字体的大小，如0.8em、10px等 |
| font | 字体复合类型 | 当然如果觉得一个个设置比较烦，可以直接使用font来设置，font可以包含上面所有的样式 |
| font-size-adjust | 字体 | 定义是否强制对文本使用同一尺寸 |
| font-stretch | 字体 | 定义是否横向拉伸变形字体 |
关于字体的样式，它都是以font为开头的，它是设置文本样式的基础。
2. 当我们照着上面的样式设置了文字的基本样式，但是我现在想给一段文字设置下划线，或者让文字间的距离远一点，这又怎么做呢？
下表为文本样式属性：
| word-spacing | 文本 | 顾名思义，这是设置文字间的聚类的 |
| letter-spacing | 文本 | 这是设置字符间的距离的 |
| text-decoration | 文本 | 我们把这个词翻译成中文就是 文本-装饰， 所以如果想给文本加下划线或删除线，就是通过这个属性来设置的 |
| vertical-align | 文本 | 顾名思义，垂直-布局，意味着它是设置文本在垂直方向上的布局的，比如middle,text-top,bottom,text-bottom等 |
| text-align | 文本 | 有垂直就有水平方向的，通过此属性设置文本在水平方向上的布局，比如left(左对齐，默认值)，center(居中对齐)，justify(两端对齐) |
| text-transform | 文本 | 设置文本的大小写，比如uppercase(大写)、lowercase(小写) |
| text-indent | 文本 | 定义文本的首行缩进 |
| line-height | 文本 | 设置文本行高，这个属性在应用元素的垂直居中上非常有效 |
| text-shadow | 文本 | 定义文本阴影或模糊效果，这个属性是在css2中引入的，CSS3对该属性做了修改，增加了不透明度样式 |
| text-overflow | 文本 | 定义省略文本的处理方式 |
| direction | 文本 | 设置文本的流入方向，比如rtl(从右到左流入),inherit(通过继承获得) |
| word-wrap | 文本 | 定义当文本超过指定容器的宽度时是否换行显示 |
3.上面这些目前都是设置文字或文本的布局以及显示方式等，但是现在如果想让字体显示成彩色的，那又如何做呢？
下面是CSS3中对文字颜色的处理增强:
| color | 颜色 | 设置文字显示的颜色(这个是css1中就已经有了) |
| HSL | 颜色表示方式 | HSL是色调(H)，饱和度(S)，亮度(L)，通过这3个颜色通道的变化以及它们间叠加来表示各种各样的颜色 |
| HSLA | 颜色表示方式 | HSLA是在HSL基础上加了透明度处理 |
| RGBA | 颜色表示方式 | RGBA是在RGB基础上增加了透明度处理 |
| opacity | 颜色 | 定义颜色的不透明度 |
通过上面的内容，我们已经对文本样式属性有一些基本了解了，现在正式进行今天的燃烧字体实例分解步骤之旅。
燃烧字体，主要是运用到了CSS样式中的text-shadow阴影效果来实现。
text-shadow属性，在CSS2中引入进来的，CSS3又重新定义了它，增加了模糊半径，这就给我们实现火焰效果提供了方便。
text-shadow语法如下:
| text-shadow: <x轴方向上的偏移量> <y轴方向上的偏移量> <模糊半径(可以省略)> <阴影颜色(可以省略)>; |
通过它的语法，我们知道，如果我们不需要模糊效果和颜色，则可以写成 text-shadow:1px 1px； 这句话就是说，阴影是沿着x,y轴正方向偏移1像素的距离。
这里我要声明一下，颜色值的位置不一定放在后面，也可以放在前面，但是 偏移量和模糊半径的顺序不能改变。
好了，开始我们的代码之旅吧，先创建html页面，代码如下所示:
|
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”styles.css”>
<title>阴影效果</title>
</head>
<body>
<div class=”container”>
www.itdriver.cn
</div>
</body>
</html>
|
接着，我们在外部样式文件中，设置如下的样式代码(在样式中我已经将每一行意思加了注释)：
|
body{/*将背景设置成黑色，便于查看火焰效果*/
background-color:black;
}
.container{
font-family:serif,sans-serif,cursive; /*设置字体类型*/
height:400px;/*设置height与line-height，是文字在container中垂直方向上居中显示*/
line-height:400px;
font-size:80px; /*设置字体大小*/
font-weight:bold; /*将字体加粗显示*/
color:black; /*设置文本颜色为黑色，营造黑夜效果*/
text-align:center; /*设置文本在水平方向上居中显示*/
text-shadow:0 0 4px white,
0 -5px 6px #FFE500,
2px -10px 6px #FFCC00,
-2px -15px 11px #FFCC00,
2px -25px 18px #FF8000;
}
|
运行一下代码，燃烧着的文本效果就出来了。
利用text-shadow，我们也可以实现 文字凸出的效果或发光字体效果等等，大家可以开动脑经，试试看吧。
关于字体效果各种属性，我会在以后章节的实例里再给大家做更详细讲解。
欢迎大家加入互联网技术交流群：
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
相关推荐
text-shadow 给文字设置阴影的属性 text-shadow: 1px 2px 3px red; 1px表示X轴偏移量（取值范围负数~正数，负数阴影在左，正数阴影在右），2px表示Y轴偏移量，3px表示模糊度(数值越大越模糊，该数值不能为负值) ...
HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。
利用CSS3新增的text-shadow属性可以生成文本阴影，在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果，大大提高开发效率，无需链接图片文件，节约带宽。
由于qss不支持css3的box-shadow效果，故而该工程中，采用类似android九点图的方式，把背景图截为9分，即4角4边一中心，并把4角4边重绘于待修饰的控件的边缘，从而模拟了box-shadow效果。
文本阴影text-shadow属性特效： 1.右下角阴影，左下角阴影，左上角阴影，右上角阴影 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发. 首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的. text-...
text-shadow 语法 CSS Code复制内容到剪贴板 text-shadow: h-shadow v-shadow blur color; 实例 基础的文本阴影效果： CSS Code复制内容到剪贴板 { text-shadow: 5px 5px 5px #FF0000; } Eg: CSS ...
前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细参考下
利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。 二、介绍CSS3的 text-shadow属性...
text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。text-shadow 和 box-shadow 的不同之处： box-shadow语法： CSS ...
NULL 博文链接：https://caiceclb.iteye.com/blog/426970
CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。 CSS3单词与语法 CSS3单词： text-shadow...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第2章 CSS3文本与图标 例2-1 text-shadow属性
CSS3 –添加阴影（盒子阴影的使用） CSS3 – 给div或者文字添加阴影（盒子阴影、文本阴影的使用） CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。...
使用css3实现燃烧字体的制作，使用css3的新属性text-shadow来实现
CSS3新属性2013-05-21</title> <style> .test li:hover{border-color:#999;background-color:#bbb;color:#999;} .text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1...