这篇文章将为大家详细讲解有关怎么用css实现渐变效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一、css背景色渐变样式
1.css线性背景渐变样式
语法：
background-image:linear-gradient(<point>||,<stop>,<stop>,<stop>)
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(colorstops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比。
代码（考虑浏览器兼容性）：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>css背景渐变--线性渐变</title>
<style>
.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);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1">基本线性渐变--自上而下</div>
<divclass="demo2">基本线性渐变--45度角</div>
</div>
</body>
</html>
关于“怎么用css实现渐变效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。