以前，你必须使用图像来实现这些效果，现在可以单纯使用CSS样式来控制。
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。相比图片的渐变，样式的渐变在放大页面的情况下也不会失真。效果更好。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变 – 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
#example1 {
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<div id="example1">
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色
</div>
</body>
</html>Code language: HTML, XML (xml)线性渐变 – 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
#example1 {
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<div id="example1">
从左边开始的线性渐变。起点是红色，慢慢过渡到黄色
</div>
</body>
</html>Code language: HTML, XML (xml)
线性渐变 – 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
#example1 {
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<div id="example1">
从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：
</div>
</body>
</html>Code language: HTML, XML (xml)
Previous: 背景图片
Next: 通过角度来控制渐变效果