CSS3 多重背景图片
CSS3 允许您为元素使用多个背景图像。
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
CSS3 文本阴影
text-shadow 可向文本应用阴影。
向标题添加阴影：
h1
{text-shadow: 5px 5px 5px #FF0000;}
CSS3 自动换行
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}
CSS3 2D 转换
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
2D 转换方法：
translate()
rotate()
scale()
skew()
matrix()
translate() 方法
根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
skew() 方法
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
CSS3 过渡
当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
CSS3 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
什么是 CSS3 中的动画？
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
CSS3 多列
column-count
column-gap
column-rule
CSS3 创建多列
column-count 属性规定元素应该被分隔的列数：
CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔
CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
CSS3 边框
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。
在本章中，您将学到以下边框属性：
border-radius
box-shadow
border-image
CSS3 圆角边框
在 CSS3 中，border-radius 属性用于创建圆角：
实例
向 div 元素添加圆角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
CSS3 边框阴影
box-shadow 用于向方框添加阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 边框图片
通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：
实例
使用图片创建围绕 div 元素的边框：
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
CSS3 背景
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
background-size
background-origin
CSS3 background-size 属性
CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
CSS3 background-origin 属性
实例
在 content-box 中定位背景图片：
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
background-origin 属性规定背景图片的定位区域。
CSS3 用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
resize
box-sizing
outline-offset
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
