鲁上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5之linear-gradient背景颜色搭配</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid #000;
float: left;
margin: 0 0 10px 10px;
}
/* 默认，从上往下 to bottom 0deg*/
.box1 {
background-image: linear-gradient(red,yellow,blue);
}
/* 从右往左 */
.box2 {
background-image: linear-gradient(to left,red,yellow,blue);
}
/* 从左往右 */
.box3 {
background-image: linear-gradient(to right,red,yellow,blue);
}
.box4 {
background-image: linear-gradient(180deg,red,yellow,blue);
}
.box5 {
background-image: linear-gradient(red 10px,yellow 20px,blue 30px);
/*background-repeat: no-repeat;*/
background-size: 100% 30px;
}
.box6 {
background-image: linear-gradient(red 10px,yellow 0,yellow 20px,blue 0,blue 30px);
background-size: 100% 30px;
}
.box7 {
background-image: linear-gradient(45deg,red 25%,yellow 0,yellow 50%,red 0,red 75%,yellow 0);
/*background-repeat: no-repeat;*/
background-size: 30px 30px;
}
/* repeating-linear-gradient 色标无限循环并重复 */
.box8 {
background-image: repeating-linear-gradient(45deg,red,red 15px,yellow 15px,yellow 30px);
/*background-repeat: no-repeat;*/
/*background-size: 30px 30px;*/
}
.box9 {
background: #58a;
background-image: repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 15px,transparent 30px);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</body>
</html>