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

时间：2014-08-05 03:02:38 阅读：354 评论：0 收藏：0 [点我收藏+]

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

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	颜色	定义颜色的不透明度