css3渐变:线性和径向

知识点：

CSS3 渐变
CSS3 线性渐变
CSS3 径向渐变

CSS3 渐变

渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。

【兼容性】

【备注】：

-webkit-chrome浏览器
-moz-火狐浏览器
-ms-IE浏览器
-o- Opera

一、线性渐变

线性渐变（Linear Gradients）属性是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）
【语法】

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1.线性渐变-从上到下（默认）

background: linear-gradient(color-stop1, color-stop2, ...);

线性渐变-从上到下

2.线性渐变-从左到右

【语法】

background: -webkit-linear-gradient( begin-direction, color-stop1,color-stop2, ...);
background: -moz-linear-gradient(end-direction, color-stop1, color-
stop2, ...);
background: -o-linear-gradient(end-direction, color-stop1, color-
stop2, ...);
background: linear-gradient(to end-direction, color-stop1, color-stop2,
...);

线性渐变-从左到右

从左到右源码：

★【备注】：

浏览器为webkit内核，写开始点方向
浏览器为moz和o内核，写结束点方向
标准浏览器是to结束位置

3.线性渐变–对角

background:-webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...);
background:-moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);
background:-o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);
background:linear-gradient(to end-level end-vertical,color-stop1,color-stop2,...);

线性渐变-对角

对角源码：

4.线性渐变——使用角度

【语法】

background:linear-gradient(angle,color-stop1,color-stop2,...);

【角度说明】
角度是指水平线和渐变线之间的角度，逆时针方向计算。
0deg将创建一个从上到下的渐变，90deg将创建一个从左到右的渐变。

线性渐变-使用角度

5.线性渐变——颜色结点

【语法】

background:linear-gradient(color1 length|percentage,color2 length|percentage,...);

线性渐变--颜色结点分布

颜色结点分布源码：

【备注】：颜色结点中
如果最后一个不写值，默认100%，
如果第一个不写值，默认0%

6.线性渐变——透明渐变

线性渐变--使用透明：

线性渐变--使用透明：

7.线性渐变——重复渐变

【语法】

background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,...);

线性渐变——重复渐变

重复渐变源码：

二、径向渐变

径向渐变属性

从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
【语法】

background：radial-gradient(center,shape size,start-color,...,last-color);

径向渐变-颜色结点均匀分布（默认）

background:radial-gradient(color-stop1,color-stop2,...);

径向渐变--均匀分布

径向渐变-颜色结点不均匀分布

background:radial-gradient(color1 length|percentage,color2 length|percentage,...);

径向渐变--不均匀分布

径向渐变——设置形状

【语法】
background:radial-gradient(shape,color-stop1,color-stop2,...);
形状说明
circle——圆形
ellipse——椭圆（默认）

径向渐变--设置形状

径向渐变——尺寸大小关键字

【语法】
background:radial-gradient(size,color-stop,color-stop2,...);
【关键字说明】
closest-side:最近边
farthest-side:最远边
closest-corner:最近角
farthest-corner：最远角

径向渐变--尺寸大小关键字

练习题：

要给div元素设置圆形径向渐变，实现圆心到最近边实现从红色到绿色的渐变，下列哪个代码可以实现？（选择一项）
A.

A

B.

B

C.

C

D.

D

答案：D

径向渐变——重复渐变

【语法】

background:repeating-radial-gradien(color1 length|percentage,color2 length|percentage,...);

径向渐变--重复渐变

三、Internet Explorer渐变(IE6-8)

【语法】

filter:progid:DXImage Transform.Microsoft.gradient(startColorstr="startColor",endColorstr="endColor",GradientType=0);

综合案例