代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.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(to top,black,red);
}
.box2
{
background-image: linear-gradient(to right,black,red);
}
.box3
{
background-image:linear-gradient(to bottom,black,red);
}
.box4{
background-image:linear-gradient(to left,black,red);
}
.box5{
background-image:linear-gradient(to top left,black,red);
}
.box6{
background-image:linear-gradient(to top right,black,red);
}
.box7{
background-image:linear-gradient(to bottom left,black,red);
}
.box8{
background-image:linear-gradient(to bottom right,black,red);
}
.box9{
background-image:linear-gradient(to left top,black,red);
}
.box10{
background-image:linear-gradient(to left bottom,black,red);
}
.box11{
background-image:linear-gradient(to right top,black,red);
}
.box12{
background-image:linear-gradient(to right bottom,black,red);
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box1">to top</div>
<div class="box2">to right</div>
<div class="box3">to bottom</div>
<div class="box4">to left</div>
<div class="box5">to top left</div>
<div class="box6">to top right</div>
<div class="box7">to bottom left</div>
<div class="box8">to bottom right</div>
<div class="box9">to left top</div>
<div class="box10">to left bottom</div>
<div class="box11">to right top</div>
<div class="box12">to right bottom</div>
</div>
</body>
</html>
