<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
float: left;
background: linear-gradient(to top,pink,white);
}
.two{
width: 200px;
height: 200px;
float: left;
margin-left: 50px;
background: linear-gradient(to left,pink,white);
}
.three{
width: 200px;
height: 200px;
float: left;
margin-left: 50px;
background: linear-gradient(to bottom,pink,white);
}
.four{
width: 200px;
height: 200px;
margin-left: 50px;
float: left;
background: linear-gradient(to right,pink,white);
}
</style>
</head>
<body>
<div class="one">由下至上渐变</div>
<div class="two">由右至左渐变</div>
<div class="three">由上至下渐变</div>
<div class="four">由左至右渐变</div>
</body>
</html>