线性渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>线性渐变</title>
<style type="text/css">
.all {
100px;
height: 100px;
border: 1px solid black;
margin: 20px auto;
}
#one {
background-image: linear-gradient(red, yellow, blue);
}
#two {
background-image: linear-gradient(to right, red, yellow, blue);
}
#three {
background-image: linear-gradient(to left bottom, red, yellow, blue);
}
#four {
background-image: linear-gradient(200deg, red, yellow, blue);
}
#five {
background-image: linear-gradient(-200deg, red, yellow, blue);
}
</style>
</head>
<body>
<div class="all" id="one"></div>
<div class="all" id="two"></div>
<div class="all" id="three"></div>
<div class="all" id="four"></div>
<div class="all" id="five"></div>
</body>
</html>
径向渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<style type="text/css">
.all {
150px;
height: 150px;
border: 1px solid #000000;
margin: 10px auto;
}
#one {
background-image: radial-gradient(ellipse, red, yellow, blue);
}
#two {
/* 颜色结点不均匀分布: */
background-image: radial-gradient(red 20%, yellow 50%, blue 70%);
}
#three {
background-image: radial-gradient(circle, red, yellow, blue);
}
#four {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, blue)
}
</style>
</head>
<body>
<div class="all" id="one"></div>
<div class="all" id="two"></div>
<div class="all" id="three"></div>
<div class="all" id="four"></div>
</body>
</html>