CSS3文本
css字体类型属性
font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font-stretch(无浏览器支持), font-variant(定义字体大小写，取值有：normal、small-caps)
这里提一下font-size-adjust：
这个属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。 aspect指字体的小写字母 "x" 的高度与
"font-size" 高度之间的比率。
通常aspect值较高的字体具有较好的易读性。在元素下定义了为多种字体定义相同的aspect值，可保证当第一个字体不可用时，浏览器可以找出什么样的font-size使用第二选择字体显示文字。
再提一下font-variant，当其设定的值为small-caps(小写型大写字母)时，字体是这样显示的：
回到刚刚谈的6个文本属性，其中font-family是复合属性中必不可少的属性。此外还有一个复合属性font。
font: font-style font-weight/line-height font-family
css文本类型属性
word-spacing(词间距)、letter-spacing(字符间距)、vertical-align、text-decoration、text-indent、text-align、line-height、text-transform(定义文本大小写，取值：none,uppercase,lowercase,capitalize)、text-shadow、white-space(定义文本之间的空白符显示与否)、direction
css文本阴影属性——text-shadow
用法：
text-shadow: [color] x-offset y-offset blur-radius(只能是正值)这个属性的用法跟box-shadow挺相似的，都是需要定义颜色、x轴偏移、y轴偏移和模糊半径。
但是box-shadow多了一个阴影扩展的属性，位于模糊半径后。
兼容性：
ie9+以及其他主流浏览器。
若想更好地兼容ie，可使用滤镜属性。
E: {filter:shadow(Color= 颜色值, Direction= 数值, Strength= 数值)}
其中Direction用于设定投影方向。
css溢出文本属性——text-overflow
语法：
text-overflow: clip || ellpisisclip: 简单裁切，不显示省略标记ellpisis: 文本溢出时显示省略（…）标记
兼容性：
IE6+！！！！以及其他主流浏览器。
使用方法：
先来看clip的情况：
代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: clip;
}
效果：
明显看出text-overflow没有起到任何裁切的效果。要想这个属性生效，需要配合其他三个属性使用，分别是 over-flow: hidden(定义超出隐藏)、white-space: nowrap(定义文本不换行)、width(元素宽度)。再来看看改进后的代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}效果：
现在来看看ellipsis的情况：
同上啦，都是需要配合width、overflow: hidden、white-space: nowrap使用的。
代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
效果：
看上去就比clip自然多了。并且这个时候文本输出是完整的，只不过收到了元素容器大小限制无法全部显示出来，这是就用"…"代替隐藏的部分。
css3文本换行
在text-overflow的每个例子中都用到了white-space属性，用来禁止文本换行。为了增强文本换行显示的功能，css3中又添加了word-wrap和word-break属性。
word-wrap
在CSS3中，word-wrap可以实现长单词和URL地址的自动换行。
语法：
word-wrap: normal | break-wordnormal: 浏览器只在半角空格或连字符的地方进行换行。
break-word: 将内容在边界内换行（不截断英文单词换行）
word-break
语法：
word-break: normal | break-all | keep-all
normal: 浏览器只在半角空格或连字符的地方进行换行。
keep-all: 不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器。（个人感觉跟normal类似）
break-all: 强行截断英文单词，达到词内换行效果。
这里比较一下word-wrap和word-break的区别：
/*这是测试word-wrap为break-word的box*/
.box {
width: 200px;
word-wrap: break-word;
border: 1px solid sandybrown;
}
/*这是测试word-break为break-all的box*/
.box2 {
width: 200px;
word-break: break-all;
border: 1px solid sandybrown;
}
效果：
附加word-wrap为normal和word-break为keep-all的测试：
white-space
这个属性主要用来声明建立布局过程中如何处理元素中的空白符。
语法：
white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit
pre: 类似html中<pre>标签效果。
nowrap: 文本不会换行。直至遇到<br/>
pre-line: 合并空白符，但是保留换行符。意思是不能有空格，但可以换行。
pre-wrap: 保留空白符和换行符。
现在来测试一下：
html：
css：
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
CSS3颜色
css3新增的颜色定义属性：
rgba(r,g,b,a)、hsl(h,s,l)、hsla(h,s,l,a)
其中a的值为0~1
浏览器兼容性为ie9+以及其他主流浏览器;
这里提一下rgba和opacity为元素设置透明度的区别：
opacity只能为元素的背景设置透明度，并且影响其后代元素，使其后代元素都将继承其透明度。
rgba可以对元素任何具有颜色的属性设置。并且对其后台元素无影响。
因为hsl的使用频率较少，这里就不详细叙述了。可以看看这篇文章：Click here
