​​​目录

1.线性渐变

2.径向渐变

1、线性渐变

线性渐变使用linear-gradient，语法如下：

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

1渐变方向有以下几种值：

使用表示方位的单词

to top 表示从下往上的方式进行渐变

to bottom 表示从上往下的方式进行渐变

to right 表示从左往右的方式进行渐变

to left 表示从右往左的方式进行渐变

to top left 表示从右下向左上进行渐变(top和left可以交换位置，下同)

to top right 表示从左下向右上进行渐变

to bottom left 表示从右上向左下进行渐变

to bottom right 表示从左上向右下进行渐变

使用角度表示，例如0deg等同于to top， 90deg等同于to right

使用弧度，单位为rad

使用turn，代表环绕圆圈的圈数，0.5turn表示半圈，也就是180deg

使用grad，表示百分度，400grad表示360deg

background-image: linear-gradient(to top, red, green);

background-image: linear-gradient(to bottom, red, green);

background-image: linear-gradient(to left, red, green);

background-image: linear-gradient(to right, red, green);

background-image: linear-gradient(to left top, red, green);

background-image: linear-gradient(to left bottom, red, green);

background-image: linear-gradient(to right top, red, green);

background-image: linear-gradient(to right bottom, red, green);

background-image: linear-gradient(45deg, red, green);

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

background-image: linear-gradient(1.57rad, red, green);/*0.5π*/

background-image: linear-gradient(0.5turn, red, green);

background-image: linear-gradient(200grad, red, green);

可以给每种颜色设置位置(可以使用百分比，像素，em等)，如下：

background-image: linear-gradient(to right, red 30%, green);

background-image: linear-gradient(to right, red 60%, green);

background-image: linear-gradient(to right, red 50px, green);

background-image: linear-gradient(to right, red, red 30%, green 30%, green 60%, blue 60%, blue);

section {width: 400px;height: 1em;margin-top: 10px;border-radius: .3em;background-image: repeating-linear-gradient(-45deg, red, red 10%, green 10%, green 20%);}