收藏

下载资源 加入VIP,免费下载

第1页 / 共13页

第2页 / 共13页

第3页 / 共13页

第4页 / 共13页

第5页 / 共13页

角度：

从什么角度开始渐变

xxxdeg的形式

逆时针

.box{width:

300px;height:

300px;border:

10pxsolid#000;background-image:

-webkit-linear-gradient（60deg,red,blue）;}

点：

渐变点的颜色和位置

black50%，位置可选

4repeating-linear-gradient

5线性渐变实例

加入点的位置

top,red40%,green60%

top,red50%,green50%

同一个位置两个点——直接跳变

也可以用px

配合rgba

top,rgba（255,255,255,1）,rgba（255,255,255,0）

加入背景图片

background:

-webkit-linear-gradient（top,rgba（255,255,255,1）30%,rgba（255,255,255,0））,url（a.gif）

6实例1：

进度条

鼠标移上，向左运动，实现类似进度条的效果

7实例2：

XX音乐图片光影效果

1.

2.

鼠标移上，运动起来

二、径向渐变

radial-gradient（[<起点>]?

[<形状>||<大小>,]?

<点>,<点>…）;

起点：

可以是关键字（left,top,right,bottom），具体数值或百分比

形状：

ellipse、circle

大小:

具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖（closest-side,closest-corner,farthest-side,farthest-corner,containorcover））;

注意firefox目前只支持关键字

径向渐变的关键字