css如何实现颜色的渐变？？

html-css015

css如何实现颜色的渐变？？,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{width:200pxheight:150pxbackground:linear-gradient(red,white)}

3、浏览器运行index.html页面，此时td中的div的背景颜色从红色到白色渐变。

可以的，只要把它们用逗号隔开即可，如果你愿意，你甚至可以用多张图片与多个渐变进行复杂的效果叠加。比如下面是两张图片错开位置后放到渐变背景上的例子：

<style>

#ddiv

{

width:480px height:360px

background: url(图片1) no-repeat 30px 20px, url(图片2) no-repeat 160px 180px,-webkit-linear-gradient(top,#966,#8ff)

}

</style>

<div id="ddiv"></div>

要注意的是，在background中排列的多个背景元素（图片或渐变），前面的会覆盖后面的（假如它们位置重合的话）