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度，举一反三，想要其他的倾斜度渐变直接改数值就可以了哦。

设置方法：

1、启动DW软件，新建一个网页文件，在蚂败埋body中添加一个标签，然后给他一定CSS样式到填充了背景色为红色。

2、添加线性枯芦渐变代码保存并刷新网页后，可以看到背景色闷蚂已经是渐变色了。

3、从上到下渐变，只需要把left改成top即可。

01

打开软件

可以使用Dreamweaver或Visual studio软件，比如打开VS软件，如下厅毁咐图所示：

02

创建一个DIV

然后在body主体中创建一个div名为【a】， <div class="a">DIV</div>，如下图所示：

03

设置属性

然后设置div的属性，比如高度、宽度和颜色扮纯等等，如下图所示：

04

背景渐变色

然后设置背景渐变色，代码如下图：

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff))

其中：linear-gradient()是用来创建线性渐余尺变的语句。

05

预览效果

点击预览图标，在浏览器中的显示效果图如下所示：

---