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

html-css016

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的背景颜色从红色到白色渐变。

CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。

做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。

然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。

如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。