css渐变、背景、过渡、分页
1. CSS3渐变
(1)、什么是渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
(2)、CSS3渐变的分类
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（cGradients）- 由它们的中心定义
（3）、线性渐变
不给方向默认从上到下渐变（从左上角开始）：
#grad { background-image: linear-gradient(red 10%, green 90%); }百分比代表颜色结点不均匀分布
从左到右渐变：
#grad {
height: 200px; background-image: linear-gradient(to right, red , yellow);
}
（4）径向渐变
1、 颜色结点均匀分布（默认情况下）
#grad { background-image: radial-gradient(red, yellow, green); }
2、颜色结点不均匀分布
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }
3、设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad { background-image: radial-gradient(circle, red, yellow, green); }
2.CSS3背景
background-image
设置两个背景图片
background-image: url(img_flwr.gif), url(paper.gif) top right;
background-size
background-size指定背景图像的大小
background-size:100% 100%;
background-origin
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
根据content-box, padding-box,和 border-box区域内可以剪裁背景图像。
过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
transition
简写属性，用于在一个属性中设置四个过渡属性。
transition：property，duration，delay，timing-function
transition-property
规定应用过渡的 CSS 属性的名称。
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。
除了可以用ease、ease-in、ease-out、ease-in-out设置还可以用cubic-bezier（）函数表示
eg：transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-delay
规定过渡效果何时开始。默认是 0。
