1.3 渐变

• 线性渐变
• 径向渐变

线性渐变

• 普通渐变

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
background: linear-gradient(to bottom, red, yellow)">

</div>

• 角度渐变

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
background: linear-gradient(10deg, rgba(255,0,0,0), red)">
    <!--相当于 to top 与 top right 之间 -->

</div>

• 不均匀分布

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
background: linear-gradient(to bottom, red 30%, yellow 100%)">

</div>

• 多色渐变

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);">

</div>

• 重复渐变

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
background: repeating-linear-gradient(to right ,red, yellow 10%, green 20%);">

</div>

径向渐变

• 普通渐变 1

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
  background: radial-gradient(circle farthest-corner at top, greenyellow 30%, white 50%, black 100%);">

</div>

• 普通渐变 2

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
  background: radial-gradient(ellipse closest-side at center, greenyellow 30%, white 50%, black 100%);">

</div>

• 重复径向渐变（注：不一样的）

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid gray;
    background: repeating-radial-gradient(red, yellow 10%, green 15%);">

</div>