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: all 2s 5s ease-in;

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。