用 linear-gradient() 实现线性渐变

基本用法

linear-gradient（线性渐变）是 CSS3 提供的一种背景图像，它不是颜色，而是一张“渐变图片。所以用的时候一般是搭配 background-image 用的：

background-image: linear-gradient([方向], 颜色1 位置1, 颜色2 位置2, ...);

参数解释：方向

决定了渐变的走向（如果省略，默认是从上往下）。

简单写法（关键字写法）

linear-gradient(to right, red, blue)
linear-gradient(to bottom right, red, blue)

精细写法（角度）

background: linear-gradient(90deg,red,blue);

下面两张图可以帮你理解角度是怎么工作的，记住是顺时针方向转就行。

参数解释：位置

我更倾向于把它理解为颜色出现的位置，也就是在这个位置肯定是这个颜色。

下面是一种精确定义了位置来实现 Insgram 按钮背景的示例

        background: linear-gradient(

          45deg,

          #f09433 0,

          #e6683c 25%,

          #dc2743 50%,

          #cc2366 75%,

          #bc1888 100%

        );

效果：

更多平台的主题背景色可以看这篇文章：
常用平台用到的主题色