线性渐变

CSS 3 为我们提供了一个渐变生成器，专门用来生成渐变图片。

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(green, yellow);
        }

通过 linear-gradient 这个渐变生成器，就可以生成一个线性渐变的，里面传入的就是渐变的颜色，可以看见，默认是从上往下的渐变，我们也可以改变其方向

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to right,green, yellow);
        }

通过第一个参数，就可以改变其方向，很显然，如果不写第一个参数，默认值应该是 to bottom。当然，我们可以写两个方向让它斜过来。

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to right bottom,green, yellow);
        }

这样就形成了一个朝右下的渐变

除了填写方向以外，我们还可以填写度数

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(0deg,green, yellow);
        }

通过 deg 单位可以写具体度数，显然，0deg 就是朝上，这个和钟表的方向其实是一样的，0 度朝上，90 度朝右，180 度朝下，270 度朝右，当然也可以为负，负 90 度和 270 度是等价的。

我们看到，这个过渡是从头到尾均匀过渡的，其实还可以这样写

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(270deg, green 20px, yellow 40px);
        }

这样写就是说从 0 到 20 像素全是绿色，20 到 40 像素是过渡色，40 像素以后全是黄色

 .test {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(270deg, green 20px, yellow 40px,blue 60px, pink 80px);
        }

这样写很多颜色，其实就是从 0 到 20 像素全是绿色，从 20 到 40 像素过渡到黄色，从 40 到 60 像素过渡到蓝色，从 60 到 80 像素过渡到粉色，然后 80 像素以后全是粉色。这个其实就很像那种关键帧，规定几个像素点的颜色值，然后 CSS 就会自动去渐变。

如果要保持一个颜色，只需要设置两个相同的值即可，比如让 20 px 和 40 px 都设置为一个颜色，就可以在 20 和 40 之间保持这个颜色，除此之外，还有一种方式，就是在颜色参数填入两个值：background-image: linear-gradient(270deg, green 20px 50px,blue 60px, pink 80px);，在这个例子中，20 像素到 50 像素将会是纯绿色

.box {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(green 0%, red 100%);
}

像这样设置百分比也是可以的

除了基础的现象渐变外，还有重复线性渐变

.box {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(skyblue 0%, yellow 10%);
}

这里推荐三个渐变配色网站，以帮助我们写出好看的渐变配色：

• Gradient Colors Collection Palette - CoolHue 2.0
• uiGradients - Beautiful colored gradients
• Fresh Background Gradients | WebGradients.com 💎

径向渐变

除了这种线性的渐变，还有一种是径向渐变，即 radial-gradient()

 .test {
            width: 100px;
            height: 100px;
            background-image: radial-gradient(green 20px, yellow 30px, blue 40px, pink 50px);
        }

可以看到，这是一个从内向外的渐变，是这种扩散渐变，这其实就是一个从一个点向外扩散的渐变，既然是一个圆，那我们就一定可以设置圆心。

 .test {
            width: 100px;
            height: 100px;
            background-image: radial-gradient(at left top ,green 20px, yellow 30px, blue 40px, pink 50px);
        }

使用 at 关键字可以设置圆心位置，可以使用这样的单词，也可以使用百分比或者像素

.test {
            width: 100px;
            height: 100px;
            background-image: radial-gradient(at 10% 20%, green 20px, yellow 30px, blue 40px, pink 50px);
        }

我们将这个东西调成长方形，它就会变成一个椭圆

如果我要让它保持一个圆形，就可以在 at 前面加上 circle

.test {
            width: 100px;
            height: 100px;
            background-image: radial-gradient(circle at 10% 20%, green 20px, yellow 30px, blue 40px, pink 50px);
        }

除此之外，在 circle 和 at 中间，还可以填入放射半径，或者说放射到哪里结束，实际上第一个参数就规定了放射形状、放射半径、放射开始位置这些信息，而后面的参数则是一个一个颜色游标，规定到哪里应该是什么颜色。

关于放射半径，如果填入的是一个值，例如 50 px，那么此时由于只有一个，所以一定是圆形，如果是两个值，那么一定是椭圆，所以放射半径实际上就可以替代 circle 关键字。

除了这两个渐变之外，还有 repeating-linear-gradient()，和 repeating-radial-gradient(), 这两个的参数和前面的一模一样，唯一的区别就是 repeating，如果是 linear-gradient，在最后一个颜色之后会一直保持这个颜色，但如果使用 repeating-linear-gradient()，则会不断重复这个渐变效果，就像下图这样。

关于颜色的写法

CSS 3 提供了 rgba 这种颜色写法，这个相信读者都用过，除此之外还提供了 hsl 和 hsla 这种写法，有兴趣自己看文档
hsl() - CSS：层叠样式表 | MDN

currentColor

currentColor 是 CSS 3 提供的一个变量，它表示的就是当前元素的 color 属性的值，如果我要在某个地方使用到当前元素的 color 值，就直接写 currentColor。
<color> - CSS：层叠样式表 | MDN

锥形渐变

.box {
	width: 100px;
	height: 100px;
	background-image: conic-gradient(skyblue, white);
}


这是一个最简单的锥形渐变，实际上，锥形渐变就像是一个转圈的圆进行渐变，默认以中心点为原点，从 12 点钟方向开始，沿着顺时针进行渐变。

像渐变原点，起始角度，这些都是可以手动设置的，如下

.box {
	width: 100px;
	height: 100px;
	background-image: conic-gradient(from 45deg at 20px 20px, skyblue, white);
}


既然这个渐变是一个圆形的轨迹，那就需要用角度来表示渲染区间，如下所示

.box {
	width: 100px;
	height: 100px;
	background-image: conic-gradient(skyblue 0deg, white 45deg, purple 360deg);
}


当然，也可以用百分比

.box {
	width: 100px;
	height: 100px;
	background-image: conic-gradient(skyblue 0%, white 80%, purple 100%);
}


我们可以利用线性渐变做一个选色盘

.box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(closest-side, white, transparent),
		conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}


使用径向渐变，可以非常方便地实现棋盘格效果，这也是棋盘格效果的最简单的实现方案

.box {
	width: 400px;
	height: 400px;
	background-size: 40px 40px;
	background-image: conic-gradient(white 0deg 90deg, #ccc 90deg 180deg, white 180deg 270deg, #ccc 270deg 360deg);
}


conic-gradient 存在兼容性问题