一.线性渐变
1.基本语法格式：
background-image：linear-gradient([<angle>|<side-or-center>,] color stop,color stop[,color stop]*）；
2.属性解释：
<angel>:表示渐变的角度，角度数的取值范围为0~360deg，这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变<side-or-center>:表示通过关键字来确定渐变方向。默认值为top（从上到下），取值范围是[left,rigth,top,bottom,center,top rigth,top left,bottom rigth, bottom right,left center,right center ]其中注意Chrome没有[center,left center,right center]color stop:用于设置颜色边界，color为边界颜色，stop为该边界的位置，stop的值可为像素或百分比数值。
3.示例如下：
（1.1）代码部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3线性渐变</title>
</head>
<style type="text/css">
.rainbow-linear-gradient{
width: 460px;
height: 160px;
background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
}
</style>
<body>
<div class="rainbow-linear-gradient"></div>
</body>
</html>
（1.2）效果如下：
（2.1）代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1 {
height: 200px;
background: linear-gradient(to bottom left, blue, red );
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
（2.2）效果如下：
（3.1）代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 100px;
margin: 100px auto;
border: 1px dashed darkmagenta;
background-size: 100px 100px;
background-image: linear-gradient(90deg,white 25%, black 25%, black 50%, white 50%, white 75%, black 75%, black 100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
（3.2）效果如下：
二.径向渐变
1.基本语法格式：
background-image：radial-gradient（圆心坐标，渐变形状 渐变大小，color stop，color stop[，color stop]*）
圆心坐标：用于表示放射的圆形坐标，可设置为形如10px 20px的x-offset y-offset,或使用预设值center。
-渐变形状：circle为圆形；ellipse为椭圆形，默认值渐变大小：
closest-side或contain：以距离圆心最近的边的距离作为渐变半径。
closest-corner：以距离圆心最近的角的距离作为渐变半径。
farthest-side：以距离圆心最远的边的距离作为渐变半径。
farthest-corner或cove:以距离圆心最远的角的距离为渐变半径。
2.示例如下：
（1.1）代码部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3径向渐变</title>
<style type="text/css">
.rainbow-radial-gradient{
width: 300px;
height: 300px;
background-image: -webkit-radial-gradient(100px, #ffe07b 15%, #ffb151 2%, #16104b 50%);
}
</style>
</head>
<body>
<div class="rainbow-radial-gradient"></div>
</body>
</html>
（1.2）效果如下：
（2.1）代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#one {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green);
background: -o-radial-gradient(red, yellow, green);
background: -moz-radial-gradient(red, yellow, green);
background: radial-gradient(at 10px 10px,red, yellow, green);
}
</style>
</head>
<body>
<div id="one"></div>
</body>
</html>
（2.2）效果如下：
（3.1）代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#one {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<div id="one"></div>
</body>
</html>
（3.2）效果如下：
三.重复渐变
1.线性重复渐变
（1）基本语法格式：
repeating-linear-gradient（起始角度，color stop[,color stop]*）
（2）示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1 {
width: 300px;
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>
</head>
<body>
<h3>重复的线性渐变</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>
（3）效果如下：
2.径向重复渐变
（1）基本语法格式：
repeating-linear-gradient（圆心坐标，渐变形状，渐变大小，color stop[,color stop]*）
（2）示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style type="text/css">
div{
width:250px;
height:250px;
}
.antzone{
background:repeating-radial-gradient(#ace, #ace 2px, #f96 2px, #f96 4px);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
（3）效果如下：
