html中怎样写渐变色代码,css如何实现渐变效果？

一、css背景色渐变样式

1.css线性背景渐变样式

语法：

background-image:linear-gradient(||,,,)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(colorstops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比。

代码(考虑浏览器兼容性)：

css背景渐变--线性渐变

.demo{

width:500;

height:300;

margin:50pxauto;

}

.demo*{

width:200px;

height:200px;

margin:20px;

text-align:center;

line-height:200px;

color:#fff;

font-size:16px;

float:left;

}

.demo1{

/*底色*/

background-color:#fd0d0d;

/*chrome2+,safari4+;multiplecolorstops*/

background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#fd0d0d),color-stop(0.66,#d89e3c),color-stop(0.83,#97bb51));

/*chrome10+,safari5.1+*/

background-image:-webkit-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*firefox;multiplecolorstops*/

background-image:-moz-linear-gradient(top,#fd0d0d,#d89e3c,#97bb51);

/*ie6+*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c');

/*ie8+*/

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c')";

/*ie10*/

background-image:-ms-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*opera11.1*/

background-image:-o-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*标准写法*/

background-image:linear-gradient(#fd0d0d,#d89e3c,#97bb51);

}

.demo2{

/*底色*/

background-color:#d41a1a;

/*chrome2+,safari4+;multiplecolorstops*/

background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#d41a1a),color-stop(0.66,#d9e60c),color-stop(0.83,#5c7c99));

/*chrome10+,safari5.1+*/

background-image:-webkit-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);

/*firefox;multiplecolorstops*/

background-image:-moz-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);

/*ie10*/

background-image:-ms-linear-gradient(45deg,#d41a1a0%,#d9e60c100%);

/*opera11.1*/

background-image:-o-linear-gradient(45deg,#d41a1a,#d9e60c);

/*标准写法*/

background-image:linear-gradient(45deg,#d41a1a,#d9e60c);

}

基本线性渐变--自上而下