DW教程：怎么用CSS+DIV制作背景线性渐变色？

1启动DW软件，新建一个网页文件，在body中添加一个

标签，然后给他一定CSS样式，【width:300pxheight:200pxbackground:#ff0000；】我们可以看到填充了背景色为红色。

2然后我们添加线性渐变代码【background:-webkit-linear-gradient(left,#ff5000,#ff9000)no-repeat】，保存并刷新网页后，可以看到背景色已经是渐变色了。

3我们来分析下这段代码的含义，括号中的【left】代表颜色是从左到有的渐变，两个颜色色值【#ff5000,#ff9000】代表从第一个色值渐变到另一个色值。

4如果是从上到下渐变，只需要把【left】改成【top】就可以了。

5从右向左渐变就是把方向改为【right】

6从下向上相信大家也都明白了吧，改成【bottom】就可以啦。

7如果我们想让渐变色改成45度斜着渐变，就把方向值改为【45deg】就可以咯，45就是45度，举一反三，想要其他的倾斜度渐变直接改数值就可以了哦。

在background-image属性中使用linear-gradient（）。

background-image：<bg-image> [ , <bg-image> ]

<bg-image> = <image> | none

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：无背景图。

<image>：使用绝对或相对地址指或者创建渐变色来确定图像。

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：

用角度值指定渐变的方向（或角度）。

to left：

设置渐变为从右到左。相当于: 270deg

to right：

设置渐变从左到右。相当于: 90deg

to top：

设置渐变从下到上。相当于: 0deg

to bottom：

设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop> 用于指定渐变的起止颜色：

<color>：

指定颜色。

<length>：

用长度值指定起止色位置。不允许负值

<percentage>：

用百分比指定起止色位置。

说明：

用线性渐变创建图像。

如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。

网页产生渐变效果不一定非要什么FLASH其实原理非常简单，META标签中就带有动态滤镜的功能。本站的这种效果其实就是用了meta标签而没有做其他任何修改。

你可以把以下这两段加到你的HTML的META头中，再看看效果：-）

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans其实就是一种动态滤镜效果，当然还有其他的方法也可以产生这种动态滤镜效果

<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">

<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

Duration表示滤镜特效的持续时间(单位：秒)

Transition　滤镜类型。表示使用哪种特效，取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

Tags: 资料存档, 有意思

---