CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补，增加了更多的属性值，来适应复杂环境中文本的呈现。
一、定义文本阴影
可以给文字添加阴影效果了 Shadow 影子
语法：
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 | none;
-
- none：表示默认值，没有阴影;
- 水平位置：表示对象的阴影水平偏移值，可为负值
- 垂直位置：表示对象的阴影垂直偏移值，可为负值
- 模糊距离：设置对象的阴影模糊值，不允许负值
- 阴影颜色：设置阴影的颜色
扩展：可以给 text-shadow 设置多个值，表示多阴影的文字，可以做很多的特效。
Demo：凹凸文字的特效
样式：
1 div { 2 color: #ccc; 3 font: 700 80px "微软雅黑"; 4 } 5 div:first-child { 6 /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ 7 text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; 8 } 9div:last-child { 10 /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ 11 text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; 12}
结构：
1 <div>我是凸起的文字</div>
2 <div>我是凹下的文字</div>
二、文本换行
CSS3 中定义了几个关于换行的属性：
1、line-break
该属性专门负责控制日文换行
2、word-wrap
该属性可以控制换行。
语法格式：
word-wrap: break-word;
取值 break-word 时，将强制换行，中文文本没有任何问题，英文语句也没问题。但是对于长串的英文不起作用。该取值控制是否断词，而不是断字符。
3、word-break
该属性主要针对亚洲语言和非亚洲语言进行控制换行。
语法格式：
word-break: normal | break-all | keep-all;
-
- normal： 使用浏览器默认的换行规则。
- break-all： 允许在单词内换行。（允许在任意字内断开）
- keep-all： 只能在半角空格或连字符处换行。(主要处理英文单词)
4、white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容或格式化文本作用。
语法格式：
white-space: normal | nowrap | break-word;
-
- normal：默认处理方式，表示控制连续文本换行；
- nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行，可以处理中文。
- break-word：表示内容将在边界内换行。
三、定义溢出文本
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
语法格式：
text-overflow : clip | ellipsis | ellipsis-word;
- 该属性的初始值为无，适用于块级元素或行内元素。
- clip：表示不显示省略标记（...），而是简单的裁切；
- ellipsis：表示当对象内文本移除时显示省略标记（...），省略标记插入的位置是最后一个字符;
- ellipsis：表示当对象文本移除时显示省略标记（...），省略标记插入的位置是最后一个词（word）.
Tips：注意一定要首先强制一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden）,只有这两个搭配使用才能实现溢出文本显示省略号的效果。
扩展知识：
1、
display: -webkit-box; //将对象作为弹性的伸缩盒子显示
-webkit-box-orient: vertical; //设置伸缩盒子对象内的子对象的排列方式
-webkit-line-clamp: 2; //用该属性来限定块元素内文本显示的行数
overflow: hidden; // 超出内容隐藏
text-overflow:ellipsis; //使用省略号告诉用户有内容为显示
使用以上的代码即可实现多行文本溢出显示省略号。
1 .container { // container 为放文字的容器
2 height: 30px;
3 line-height: 2em;
4 overflow: hidden;
5 border: 1px solid red;
6 position: relative;
7 }
8 .container::after {
9 content: "..."; // 通过伪元素，手动添加省略号
10 position: absolute; // 通过定位来实现
11 right: 0;
12 bottom: 0;
13 padding: 0 6px;
14 background-color: #fff;
15 }
四、添加动态内容
content 属性属于内容生成和替换模块，该属性能够为指定元素添加内容（这部分功能替代了原需 JavaScript 的任务）。
该属性能够满足样式设计中临时添加非结构性的样式服务标签，或者添加补充说明性内容等等。
语法格式：
content: normal | string | attr() | uri() | counter() | none;
-
- normal：默认值，适用于所有可用元素；
- String：插入文本内容；
- attr()：插入元素的属性值；
- uri()：插入一个外部资源，如图像，音频或浏览器支持的其他任何资源；
- counter()：计数器，用于插入排序标识；
- none：无任何内容。
五、恢复默认样式
initial 该属性值可以直接取消对某个元素的样式指定。
Demo：
p#text2 { color:initial;}
initial 属性值的作用是让各种属性使用默认值。
Tips：注意权重问题。
六、自定义字体类型
CSS3 允许用户自定义字体类型，通过 @font-face 能够加载服务器的字体文件，让客户端浏览器显示客户端没有安装的字体。
语法格式：
@font-face:{<font-description>}
@font-face 规则的选择符的固定的，用来引用服务器端的字体文件。
<font-description> 是一个属性名值时，格式类似如下样式：
descriptor:value;
descriptor:value;
descriptor:value;
descriptor:value;
{...}
descriptor:value;
属性及其取值说明如下：
-
- font-family：设置文本的字体名称；
- font-style：设置文本样式；
- font-variant：设置文本是否大小写；
- font-weight：设置文本的粗细；
- font-stretch：设置文本是否横向的拉伸变形；
- font-size：设置文本字体大小；
- src：设置自定义字体的相对路径或者绝对路径。
具体的应用请参考这篇文章：字体图标的使用