CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值 描述

direction =》 用角度值指定渐变的方向（或角度）。

color-stop1,color-stop2,… =》 用于指定渐变的起止颜色。

记录一下，本人主要用于移动端，哪个设计风格好看你就拿走吧

background-image: linear-gradient(45deg, #f43f3b, #ec008c); background-image: linear-gradient(45deg, #ff9700, #ed1c24); background-image: linear-gradient(45deg, #39b54a, #8dc63f); background-image: linear-gradient(45deg, #9000ff, #5e00ff); background-image: linear-gradient(45deg, #ec008c, #6739b6); background-image: linear-gradient(45deg, #0081ff, #1cbbb4);

---

知识点来了：

以下实例演示了从左侧开始的线性渐变，从红色开始，转为黄色:

#grad {background-image: linear-gradient(to right, red , yellow);}

以下实例演示了从左上角到右下角的线性渐变:

#grad {background-image: linear-gradient(to bottom right, red , yellow);}

以下实例演示了线性渐变指定一个角度:

#grad {background-image: linear-gradient(180deg, red, yellow);}

以下实例演示了多个终止色:

#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

以下实例使用了透明度:

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

知识点来源：https://www.runoob.com/cssref/func-linear-gradient.html