CSS3 增加了丰富的文本修饰效果，使网页看起来更加美观舒服。接下来带大家回顾一下 CSS3 新增属性
1.文本属性
| 属性 | 含义 |
|---|---|
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
| text-shadow | 向文本添加阴影 |
| text-overflow | 当文本溢出包含元素时发生的事情 |
| text-stroke | 设置文本描边 |
(1)word-wrap
允许长的内容可以自动换行,所有主流浏览器都支持该属性
| 属性值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或 URL 地址内部进行换行 |
(2)text-shadow
文字的阴影效果，所有主流浏览器都支持该属性
| 属性值 | 描述 |
|---|---|
| x-offset | 水平偏移距离，值为正向右偏移，值为负向左偏移 |
| y-offset | 垂直偏移距离，值为正向下偏移，值为负向上偏移 |
| burl | 阴影的模糊程度，值不能为负，值为0，无阴影模糊效果。值越大越模糊 |
| color | 阴影部分颜色 |
text-shadow: 0 30px 20px red, 0 -30px 20px blue, -20px 0 15px yellow, 20px 0 15px orange;
注：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0
(3)text-overflow
当文本溢出包含元素时发生的事情，所有主流浏览器都支持该属性
| 属性值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本 (只在 Firefox 浏览器下有效) |
(4)text-stroke
文本边框属性，可设置两个字 描边 宽度和颜色
2.CSS3 背景属性
为了满足更多的需求，新增了多个背景属性，提供了对背景更强大的控制
(1) background-size
设置背景图片大小
| 属性值 | 描述 |
|---|---|
| number | 可分别设置背景图宽高 |
| cover(覆盖方式) | 将背景图片等比缩放来填充整个容器 |
| contain(包含方式) | 将背景图片等比缩放至某一边紧贴容器边缘为止 |
(2) background-origin
设置元素背景图片平铺的最开始位置
| 属性值 | 描述 |
|---|---|
| padding-box | 背景图片从内边距开始平铺 |
| border-box | 背景图片从边框开始平铺 |
| content-box | 背景图片从内容区域开始平铺 |
(3) background-clip
设置元素背景图片平铺后剪切的位置
| 属性值 | 描述 |
|---|---|
| border-box | 平铺的背景图片从边框开始剪切 |
| padding-box | 平铺的背景图片从内边距开始剪切 |
| content-box | 平铺的背景图片从内容区域开始剪切 |
3.CSS3 颜色属性
(1)linear-gradient
线性渐变，是指在一条直线上进行渐变。在网页中大多数渐变都是线性渐变 linear-gradint 属性需要通过 background-image 属性进行设置，可设置 渐变方向、起始颜色、结束颜色 这三个值。
- 设置方式
1.起始颜色会渐变到结束颜色，也可以通过多个颜色值进行线性渐变。
2.渐变方向在第一个参数设置。 可选择 to left、to right、to top、 to bottom等值。也可以设置方向的一个组合使用，如 to left top 方向值。渐变方向还可以设置旋转角度：“正直为顺时针旋转，负值为逆时针旋转”
3.线性渐变的颜色位置，可通过百分比划分渐变区域大小。
(2)radial-gradient
径向渐变，是一种颜色从起始到终点由内之外进行圆形渐变（从中间向外延伸，像圆一样）
- 设置方式
1.起始颜色会渐变到结束颜色，也可以通过多个颜色值进行线性渐变。
2.渐变方向设置尚不完善，需要添加浏览器前缀才可以实现。 不支持 to 的方式 ,只支持方向的设置
CSS3 边框属性
(1)border-radius
为元素添加圆角效果，长度值可以为具体像素、百分比、em等。设置值越大圆角越明显
border-radius可通过一个值设置四个方法，也支持两个字和四个字的写法。顺序从左上角按顺时针开始设置。
(2)border-image
为边框添加背景图片,主要可以设置图片路径、切割图片的宽度、图片平铺方式这三个值。
- 通过 url 添加图片地址。
- 通过数值来设置背景图的大小，数值填充的是边框的四个方向，从图片边缘向图片内层截取响应数值进行填充。注意数值不带单位
- 默认边框中间被拉伸,可以通过图片平铺来改变边框添加的方式 repeat值表示重复、round值表示平铺、stretch值表示拉伸(默认值)。
(3)border-shadow
给容器添加阴影的样式属性,阴影不占容器空间,不参容器大小计算。
/* box-shadow: x-shadow y-shadow blur spread color inset; */
box-shadow: 10px 10px 10px 10px #666 inset;
| 属性值 | 描述 |
|---|---|
| x-shadow | 阴影部分水平偏移值 |
| y-shadow | 阴影部分垂直偏移值 |
| blur | 阴影部分模糊值 |
| spread | 阴影的范围,可以对设置好的阴影进行局部放大 |
| color | 阴影的颜色 |
| inset | 设置内阴影 |
注：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
