渐变
本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 21 课，共 43 课。
CSS 中的渐变可以让你在两种或多种颜色之间创建平滑的过渡。
让我们从一个简单的线性渐变开始：
/* 创建从上到下的线性渐变 */
.gradient-box {
background: linear-gradient(to bottom, #ff9966, #ff5e62);
}这会创建一个渐变，颜色从顶部的橙色 (#ff9966) 过渡到底部的偏红色 (#ff5e62)。
方向是可选的。如果省略方向，linear-gradient() 会从上到下渐变，和 to bottom 相同：
background: linear-gradient(#ff9966, #ff5e62); /* 从上到下 */你还可以像下面的示例一样指定方向并使用多种颜色：
/* 创建一个从左到右的线性渐变 */
.gradient-box {
background: linear-gradient(to right, red, orange, yellow, green);
}
挑战
简单为名为 sunset-gradient 的类创建一条 CSS 规则，应用线性渐变背景。渐变应当：
- 从上到下渐变
- 从颜色 #FFD700（金色）开始
- 过渡到 #FF4500（橙红色）
亲手试试
<!DOCTYPE html>
<html>
<head>
<style>
.sunset-gradient {
border: 3px solid black;
height: 300px;
width: 100%;
/* Write your CSS rule here */
}
</style>
</head>
<body>
<div class="sunset-gradient"></div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
精通 CSS中的所有课
自己练习： Web 在线编辑器