代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width: 960px;
margin:100px auto;
}
.container div{
font:20px arial;
float:left;
width: 400px;
height: 200px;
border:2px solid gray;
text-align:center;
line-height: 200px;
margin:20px;
}
.box1{background-image:linear-gradient(0deg,red,green);}
.box2{background-image:linear-gradient(45deg,red,green);}
.box3{background-image:linear-gradient(90deg,red,green);}
.box4{background-image:linear-gradient(135deg,red,green);}
.box5{background-image:linear-gradient(180deg,red,green);}
.box6{background-image:linear-gradient(225deg,red,green);}
.box7{background-image:linear-gradient(270deg,red,green);}
.box8{background-image:linear-gradient(315deg,red,green);}
.box9{background-image:linear-gradient(360deg,red,green);}
.box10{background-image:linear-gradient(0deg,red,green);}
.box11{background-image:linear-gradient(-45deg,red,green);}
.box12{background-image:linear-gradient(-90deg,red,green);}
.box13{background-image:linear-gradient(-135deg,red,green);}
.box14{background-image:linear-gradient(-180deg,red,green);}
.box15{background-image:linear-gradient(-225deg,red,green);}
.box16{background-image:linear-gradient(-270deg,red,green);}
.box17{background-image:linear-gradient(-315deg,red,green);}
.box18{background-image:linear-gradient(-360deg,red,green);}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box1">0deg</div>
<div class="box2">45deg</div>
<div class="box3">90deg</div>
<div class="box4">135deg</div>
<div class="box5">180deg</div>
<div class="box6">225deg</div>
<div class="box7">270deg</div>
<div class="box8">315deg</div>
<div class="box9">360deg</div>
<div class="box10">0deg</div>
<div class="box11">-45deg</div>
<div class="box12">-90deg</div>
<div class="box13">-135deg</div>
<div class="box14">-180deg</div>
<div class="box15">-225deg</div>
<div class="box16">-270deg</div>
<div class="box17">-360deg</div>
</div>
</body>
</html>
